CSS 세로 정렬이 플로트에서 작동하지 않습니다.

div속성에서수직 정렬과플로트를 어떻게 사용할 수 있나요? 수직 정렬은 플로트를 사용하지 않으면 정상적으로 작동합니다. 하지만 플로트를 사용하면 작동하지 않습니다. 마지막 div에 float:right를 사용하는 것이 중요합니다.

나는 다음을 시도하고 있습니다, 당신이 모든 div에서 부유물을 제거하면 그것은 잘 작동 할 것입니다:

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

CSS:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

JSFiddle

Neji
편집된 질문30일 7월 2012 в 9:04
프로그래밍
html css vertical-alignment
30일 7월 2012 в 8:52
2 파운드
해결책

줄 높이를 설정해야 합니다.

<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>

http://jsfiddle.net/VBR5J/

해설 (7)

편집됨:

세로 정렬**]1 CSS 속성은 인라인, 인라인 블록 또는 테이블 셀 요소의 세로 정렬을 지정합니다.

세로 정렬에 대한 수직 정렬 이해 문서를 읽어보세요.

Ahsan Khurshid
편집된 답변7일 11월 2017 в 5:55
해설 (2)

실제로 세로 맞춤은 부동 요소에서는 작동하지 않습니다. 부동 요소는 문서의 정상적인 흐름에서 요소를 들어올리기 때문입니다. 변형, 표, 절대 위치 지정, 줄 높이, js(최후의 수단일 수 있음) 또는 일반 HTML 표(콘텐츠가 실제로 표 형식인 경우 첫 번째 선택일 수 있음)와 같은 다른 세로 정렬 기술을 사용하는 것이 좋습니다. 이 문제에 대해 열띤 논쟁이 벌어지고 있다는 것을 알게 될 것입니다.

하지만 이 방법으로 3개의 div를 세로로 정렬할 수 있습니다:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    display:inline-block;
    vertical-align: middle; 
}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua; 
    display:inline-block;
    vertical-align: middle; 
}

.right{
    width: 150px;
    background: orange;
    display:inline-block;
    vertical-align: middle; 
}

고정 너비, 표시: 인라인 블록 및 플로팅이 모두 필요한 이유를 잘 모르겠습니다.

Gabriel
편집된 답변10일 4월 2015 в 12:12
해설 (5)