이 인라인 블록 요소는 왜 아래로 밀려나 있는 것입니까?

이 인라인 블록 요소는 왜 아래로 밀려나 있는 것입니까?

다음은 내 코드이고 나는 그 이유를 이해하고 싶습니다. #firstDiv모든 브라우저에 의해 아래로 밀려나고 있습니다.저는 왜 이런 저런 식으로 위로 당겨지지 않고 아래로 밀려나고 있는지 그 속내를 정말 이해하고 싶습니다. (그리고 저는 그들의 상의를 정렬하는 방법을 알고 있습니다 :)

그리고 나는 그것을 알고 있습니다.overflow:hidden;은 되고 왜는 잘 .div

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}

<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/ .

기본적으로 당신은 당신의 코드에 더 많은 어수선함을 추가하였고, 이는 더 많은 혼란을 야기하고 있기 때문에 우선 나는 진짜 문제를 이해하는 것을 방해하는 어수선함을 제거하려고 노력합니다.

우선 우리는 진짜 질문이 무엇인지 확인해야 합니다.그것이 ""inline-block 요소가 아래로 밀려나는 이유입니다.

이제 우리는 그것을 이해하고 먼저 어수선함을 제거하기 시작합니다.

1 - 디브 3개의 경계 너비를 모두 동일하게 부여하는 것은 어떨까요?내죠.

2 - 플로팅 요소가 인라인 블록 요소가 아래로 밀리는 것과 관련이 있습니까?아니요, 아무 상관 없어요.

그래서 우리는 그 디바운트를 함께 제거했습니다.그리고 인라인 블록 요소가 아래로 밀리는 것을 목격하게 됩니다.

줄 상자의 개념과 줄 상자가 어떻게 줄을 서 있는지를 이해하는 몇몇 문헌의 차례가 왔습니다. 마지막 단락에 여러분의 질문에 대한 답이 있기 때문에 주의 깊게 읽었습니다.

인플로우 라인 박스가 없거나 '오버플로우' 속성이 '보이는' 값 이외의 계산 값을 가지는 경우가 아니라면 '인라인 블록'의 기준선은 정상 흐름의 마지막 라인 박스의 기준선입니다. 이 경우 기준선은 하단 마진 에지입니다.

만약 당신이 기준치를 확신할 수 없다면, 여기 간단한 단어로 간단한 설명이 있습니다.

'gjpqy'를 제외한 모든 문자는 기준선에 쓰여 있는데, 마치 이 '무작위 문자' 바로 아래에 밑줄을 그은 것과 같은 단순한 가로선을 그은 것처럼 기준선이 될 것입니다. 하지만 이제 'gjpqy' 문자를 같은 선에 쓰면 이 문자들의 아래 부분이 선 아래로 떨어질 것입니다.

따라서 'gjpqy'를 제외한 모든 문자는 기준선 위에 완전히 쓰여지고 이러한 문자의 일부는 기준선 아래에 쓰여집니다.

3 - 우리 라인의 베이스라인이 어디인지 확인해 보는 것은 어떨까요?라인의 기본을 보여주는 캐릭터를 몇 개 추가했습니다.

4 - 디브에 캐릭터를 추가하여 디브에서 베이스라인을 찾는 것은 어떨까요?여기서 일부 문자는 기준을 명확히 하기 위해 div로 추가됩니다.

이제 기준선에 대해 알게 되면 인라인 블록의 기준선에 대해 다음과 같은 단순화된 버전을 읽어 보십시오.

i) 문제의 인라인 블록에 오버플로 속성이 보이는 것으로 설정되어 있는 경우(기본적으로 설정할 필요는 없지만)그러면 해당 기준선은 선의 포함된 블록의 기준선이 됩니다.

ii) 해당 인라인 블록의 오버플로 속성이 보이는 것이 아닌 것으로 설정된 경우.그러면 하단 여백이 보관 상자 선의 기준선에 표시됩니다.

• 상세첫점

이제 그린 디브에서 무슨 일이 일어나고 있는지 개념을 명확히 하기 위해 이것을 다시 한 번 살펴보시기 바랍니다.아직 혼란스러운 경우 녹색 분할에 가까운 문자를 더 추가하여 포함하는 블록 및 녹색 분할 기준선의 기준선을 설정합니다.

저는 지금 그들이 같은 기준을 가지고 있다고 주장하고 있습니다.그렇죠?

5 - 그렇다면 겹쳐서 서로 잘 맞는지 확인해 보는 것은 어떨까요?그래서 세번째 div-left: 35px를 가져왔습니다. 그들이 지금 같은 기준선을 가지고 있는지 확인하려고요?

이제 우리는 우리의 첫번째 요점을 증명했습니다.

• 세컨드포인트상세부

첫 번째 점을 설명한 후 두 번째 점은 쉽게 소화할 수 있고, 눈에 보이지 않는 것(숨김)이 아닌 오버플로 특성을 가진 첫 번째 점은 선의 밑줄에 여백이 있음을 알 수 있습니다.

이제 몇 가지 실험을 통해 더 자세히 설명할 수 있습니다.

1. first div overflow를 visible로 설정합니다.
2. 두 번째 div overflow를 표시되지 않도록 설정합니다.
3. 두 div overflow를 모두 표시되지 않도록 설정합니다.

이제 잡동사니를 가지고 와서 모든 것이 잘 되어가는지 확인해 보세요.

1. 띄운 디브를 다시 가져오십시오(물론 필요합니다).
   신체의 폭을 좀 늘린다) 효과가 없다는 것을 알 수 있습니다.
2. 동일한 홀수 마진을 다시 가져옵니다.
3. 녹색 div를 오버플로로 설정합니다. 질문에서 설정한 대로 표시됩니다(오정렬은 테두리 폭이 1px에서 5px로 증가하기 때문에 음의 왼쪽으로 조정하면 문제가 없습니다).
4. 이제 이해를 돕기 위해 추가한 문자를 삭제합니다. (물론 왼쪽의 음수도 삭제합니다.)
5. 더 이상 더 넓은 것이 필요 없기 때문에 마지막으로 몸의 너비를 줄이세요.

그리고 이제 우리는 우리가 출발했던 곳으로 돌아왔습니다.

제가 당신의 질문에 답을 해드렸기를 바랍니다.

vertical-alignbaseline이 은 &됩니다.inline-block이 http://www.brunildo.org/test/inline-block.html 를 읽으세요.

vertical-align:topn에inline-blockDIV.

이것을 확인하세요 http://jsfiddle.net/WGCyu/1/ .

으로.vertical-align:top;

데모

_{저는 원래 이 질문에 답하기 시작했는데, 마치기도 전에 속아서 여기에 답을 올립니다.}

첫째, 우리는 무엇이 무엇인지 이해할 필요가 있습니다.inline-block입니다.
MDN의 정의는 다음과 같습니다.

요소는 블록 요소 상자를 생성합니다. 블록 요소 상자는 마치 하나의 인라인 상자처럼 주변 컨텐츠와 함께 흐릅니다(교체된 요소와 매우 유사하게 동작합니다).

일이 있는지 는 를 합니다.vertical-align인 입니다입니다.baseline.

다 있습니다
:
: ::
녹색: 인라인 컨텐츠 상자의 상단과 하단입니다.

#left 요소에는 기준선이 무엇인지 제어하는 일부 텍스트 내용이 있습니다.이는 내부 텍스트가 #left의 기준선을 정의한다는 것을 의미합니다.
#오른쪽에는 콘텐츠가 없으므로 브라우저는 박스 하단을 기준선으로 사용하는 것 외에 다른 선택 사항이 없습니다.

첫 번째 인라인 컨테이너에 텍스트가 있고 다음은 비어 있는 예제에 기준선을 그렸습니다.

특정 요소를 맨 위에 정렬하는 경우 이 요소의 맨 위를 선 상자의 맨 위에 정렬한다고 말할 수 있습니다.

예를 들어 이해하기가 더 쉬울 수도 있습니다.

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
    vertical-align: baseline;
}
div#middle {
    vertical-align: top;
    height: 50px
}
   
div#right {
    font-size: 30px;
    height: 100px
}

<div id="left">
  <span>groovy</span>
</div>
<div id="middle">groovy</div>

<div id="right">groovy</div>

결과는 이렇습니다. 파란색 기준선과 빨간색 줄 상자를 추가했습니다.
여기서 발생하는 일은 라인 박스의 높이가 전체 라인의 내용물이 배치되는 방식에 따라 달라집니다.이것은 맨 위의 선형을 계산하기 위해서는 먼저 베이스라인 선형을 계산해야 한다는 것을 의미합니다.#middle요소가 가지고 있습니다.vertical-align:top 이 위치 , .#left그리고.#right기준선이 정렬되도록 수직으로 배치됩니다.이 작업이 완료되면 라인 박스의 높이가 증가합니다. 왜냐하면#right글자 크기가 커져서 요소가 조금 올라갔습니다.그 다음에는 최고의 위치를 차지합니다.#middle요소를 계산할 수 있으며, 이는 라인 상자의 상단을 따라 있습니다.

이 대안 예제를 봅니다.CSS3 모듈: 라인: 3.2. 라인 박스 랩핑 [1]:

일반적으로 선 상자의 시작 가장자리는 포함 블록의 시작 가장자리에 닿고 끝 가장자리는 포함 블록의 끝 가장자리에 닿습니다.그러나 플로팅 상자는 포함하는 블록 가장자리와 라인 상자 가장자리 사이에 있을 수 있습니다.따라서, 동일한 인라인 포맷 컨텍스트 내의 라인 박스들이 일반적으로 동일한 인라인 프로그레스 어드밴스(inline progression advance)를 갖지만, 플로트들(floats)로 인해 사용 가능한 인라인 프로그레스 공간이 감소되는 경우, 이들은 달라질 수 있습니다[...].

보시다시피 세 번째 요소는 아래로 밀립니다.overflow소유물.그 이유는 다른 곳에서 찾아야 합니다.두 번째 동작은 Cascading Style Sheets Level 2 Revision 1(CSS 2.1) 규격: 9.5 Floats [2]:

플로트가 플로우 내에 없기 때문에, 플로트 박스 전후에 생성된 위치가 없는 블록 박스는 플로트가 존재하지 않는 것처럼 수직으로 흐릅니다.그러나 플로트 옆에 생성된 현재 및 후속 라인 박스는 플로트의 마진 박스를 위한 공간을 만들기 위해 필요에 따라 단축됩니다.

당신의 모든것display:inline-block;g를 사용하고 .baseline이 경우 10.8 선 높이 계산: '선 높이' 및 '수직 정렬' 속성(바로 끝) [3]:

인플로우 라인 박스가 없거나 '오버플로우' 속성이 '보이는' 값 이외의 계산 값을 가지는 경우가 아니라면 '인라인 블록'의 기준선은 정상 흐름의 마지막 라인 박스의 기준선입니다. 이 경우 기준선은 하단 마진 에지입니다.

떠다니는 와 을 때.inline-blockelements, floating elements는 옆으로 밀려나고 inline formating은 1에 따라 다시 계산됩니다.반면에 다음 요소는 맞지 않으면 단축됩니다.이미 최소한의 공간을 가지고 작업을 하고 있기 때문에 요소를 수정한 후에 2를 누를 수 있는 다른 방법이 없습니다.이 경우 가장 높은 원소가 랩핑 디브의 크기를 정의하므로 다음을 정의합니다.baseline 3, 한편, 2에 기재된 위치 및 폭의 변경은 이러한 최소 간격의 최대 높이 요소에는 적용될 수 없습니다.이 경우 첫 번째 데모와 같은 동작이 발생합니다.

의 으로인 의 overflow:hidden을 막을 것입니다.#firstDiv 아래쪽 #container, 11조에서 이유를 찾을 수 없었지만요없이.overflow:hidden2와 3에 의해 정의되고 예외적으로 작동합니다. 데모

TL;DR: W3 권장 사항과 브라우저의 구현을 자세히 살펴보십시오.저의 겸손한 의견은 부동 요소가 주변 요소에 미치는 모든 변화를 모른다면 예상치 못한 행동을 보여주기로 결심한 것입니다.플로트의 일반적인 문제점을 보여주는 또 다른 데모가 있습니다.

문제는 float: left on the second div.를 적용했기 때문입니다. 두 번째 div는 왼쪽으로 오고 첫 번째 div는 떨어지고 두 번째 div 다음에 옵니다.float: left on the first div를 적용하면 문제가 사라집니다.

overflow:hidden은 레이아웃에 아무런 문제를 일으키지 않습니다. overflow:hidden은 div의 내부 요소에만 영향을 미치며, 외부에 있는 다른 요소와는 무관합니다.

해 보십시오.padding:0;몸으로 가서 디브들의 여백을 제거하는 거죠

더하다background-color:*any색상은 배경에서 제외*하여 차이를 확인합니다.

모든 Elements의 CSS 속성을 모두 동일하게 만들어 봅니다.

저도 비슷한 문제가 있었고 이를 해결하는 동안 Div Element에 Font 속성이 있는 Element를 떨어뜨리고 있음을 확인했습니다.

해당 Element with Font 속성을 삭제한 후 모든 DIV의 정렬이 방해되었습니다.이를 수정하기 위해 Font 속성을 모든 DIV 요소에 드롭되는 요소와 동일하게 설정했습니다.

다음 예제에서는 클래스 ".dldCuboidButton"의 Dropped 요소가 글꼴 크기: 30px로 정의되었습니다.

그래서 나는 다른 클래스에 동일한 속성을 추가했습니다. 즉, 큐보이드.DIV 요소에서 사용하는 Recycle, .liCollect, .dldCollect.이러한 방식으로 모든 DIV 요소는 요소를 해당 요소에 떨어뜨리기 전과 후에 동일한 측정을 따릅니다.

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

위의 CSS를 이용하여 동적으로 생성된 HTML의 예시입니다.

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);

언급URL : https://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward