디스플레이 내 블록 레벨 요소 : 인라인 블록

StackOverflow https://stackoverflow.com/questions/608172

  •  03-07-2019
  •  | 
  •  

문제

디스플레이 내에 (수직으로 쌓인) 디스플레이를 넣으려고합니다 : 인라인 블록 요소. CSS 사양에 따르면, 인라인 블록 요소는 포함 된 블록이어야하므로 디스플레이를 가질 수 있습니다. 그 안에 블록 요소가 있으며 레이아웃의 나머지 부분에 영향을 미치지 않아야합니다.

그러나 디스플레이 : 디스플레이 내부의 블록 요소 : 인라인 블록 요소는 나머지 페이지를 방해합니다. 인라인 블록 내에 전혀 아무것도 없거나 단락과 같은 기본 요소도 가지고 있습니다. 간단한 텍스트만이 페이지의 나머지 부분이 중단되지 않도록합니다 (방해함으로써 다른 divs를 아래로 이동시키는 것을 의미합니다.이 경우 왼쪽 빨간색 블록은 선 아래로 이동하고 그 위에 빈 공백이 있습니다). Firefox 3.0.6을 사용하고 있습니다.

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
}
</style></head><body>
  <div id="left">Left</div><div id="right">Right</div>
</body></html>

위의 것은 예상대로 왼쪽으로 왼쪽 붉은 색, 오른쪽 녹색으로 표시됩니다. 내가 "올바른"으로 바꾸면 

<p>Right</p>

또는 완전히 제거하거나 (내가 원하는대로) 두 개의 div로 교체하면 잘못된 형식을 얻습니다.

이것은 Firefox 버그입니까, 아니면 내가 뭔가 잘못하고 있습니까, 아니면 내 기대가 잘못 되었습니까? (FWIW, 즉 7은 마치 인라인 블록을 이해하지 못하는 것처럼, 중요하지 않으며, 이것은 내부 앱입니다. 그리고 나는 Firefox 만 사용하고 있습니다). 플로트/마진을 사용하고 싶은 레이아웃을 얻을 수 있지만 그렇게하지 않아도됩니다.

도움이 되었습니까?

해결책

잘 표시 : 인라인 블록은 크로스 브라우저를 얻는 데 약간 까다로울 수 있습니다. 최소 몇 번의 해킹과 Firefox 2의 경우 잠재적으로 추가 요소가 필요합니다.

CSS

.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

디스플레이 : -moz-inline-stack Firefox 2를위한 것입니다. 디스플레이 : 블록 또는 그렇지 않으면 블록 레벨 요소입니다. 참고 랩을 줄이기 위해 인라인 블록 요소가 필요한 경우 사용할 수 있다고 생각합니다. 디스플레이 : -moz-inline-box 대신에.

줌 : 1 요소에 HASLAYOUT을 제공합니다 (IE 7 이하). IE7 이하의 해킹의 1 부.

** 디스플레이 : 인라인*은 IE7 이하의 호환성에 필요한 해킹의 두 번째 부분입니다.

때때로 오버플로를 추가해야합니다. IE 호환성에도 숨겨져 있습니다.

당신의 특정 상황에 대해 나는 당신이 필요로하는 것이 다음과 같습니다.

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
  vertical-align: top;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
  vertical-align: top;
}
</style></head><body>
  <div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>

다른 팁

나는 나쁜 형식을 얻는다.

당신은 물린 것입니다 마진 붕괴, CSS '영리성'은 자주 혜택만큼이나 고통입니다. 의 여백u003Cp> 바깥쪽으로 무너져 인라인 블록에서 최고 마진이됩니다. 이것은 '인라인'요소에 마진으로 동작하여 텍스트 라인의 수직 정렬을 밀어냅니다.

'p'요소에서 마진을 제거하고 대신 패딩을 사용하여 발생하는 것을 막을 수 있습니다. 또는 블록 상단에 상단 마진이없는 비어 있지 않은 요소를 배치하고 하단에 하단 여백이없는 요소를 놓습니다.

이것은 Firefox 버그입니까?

사양에 따르면 아마도 그렇다고 생각합니다.

인라인 블록 요소의 여백은 붕괴되지 않습니다 (유동적 인 어린이들도 마찬가지).

인라인 블록이 값은 요소가 인라인 레벨 블록 컨테이너를 생성하게합니다. 인라인 블록의 내부는 블록 상자로 형식화되며 요소 자체는 원자 인라인 레벨 상자로 형식화됩니다.시각적 렌더링 모델

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top