[英]CSS Display:inline-block | 3 columns | No floats
我試圖獲得3列設計,沒有使用任何浮點數。
HTML
<header>This is a Header</header>
<div id="body">
<div id="col-1" class="col">this is a column - this is a column - this is a column - this is a column</div>
<div id="col-2" class="col">this is a column - this is a column - this is a column - this is a column</div>
<div id="col-3" class="col">this is a column - this is a column - this is a column - this is a column</div>
</div>
CSS
* {
margin:0;
padding:0;
}
header {
background:#4679BD;
width:90%;
height:70px;
line-height:70px;
font-size:20px;
text-align:center;
border:1px solid #333;
margin:10px auto;
}
#body {
width:700px;
margin:auto;
border:1px solid #333;
}
#body .col {
display:inline-block;
background:#ccc;
height:500px;
border:1px solid #333;
margin:5px;
}
#body #col-1 {
width:100px;
}
#body #col-2 {
width:200px;
}
#body #col-3 {
width:350px;
}
http://jsfiddle.net/chaos67731/fmZpr/5/
當我在“.col”類上給列寬度時,所有都保持在頂部,但是當我按ID給每個列寬度並使它們不同時,它們會按照您在上面鏈接中看到的那樣步進。
什么是解決這個問題,為什么會發生?
默認情況下, inline-block
元素的垂直對齊是baseline
。
只需在.col
上設置vertical-align:top
。
#body .col {
vertical-align: top;
}
用這個
{
vertical-align: top;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.