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
}
줄 높이를 설정해야 합니다.
<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>
실제로 세로 맞춤은 부동 요소에서는 작동하지 않습니다. 부동 요소는 문서의 정상적인 흐름에서 요소를 들어올리기 때문입니다. 변형, 표, 절대 위치 지정, 줄 높이, 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;
}
고정 너비, 표시: 인라인 블록 및 플로팅이 모두 필요한 이유를 잘 모르겠습니다.