[英]CSS Display:inline-block | 3 columns | No floats
I am trying to get a 3 column design, with out using any floats. 我试图获得3列设计,没有使用任何浮点数。
HTML 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 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/ http://jsfiddle.net/chaos67731/fmZpr/5/
When I give the columns a width on the class ".col" the all stay to the top, but when I give each column a width by the ID and make them different, they step does as you will see in the link above. 当我在“.col”类上给列宽度时,所有都保持在顶部,但是当我按ID给每个列宽度并使它们不同时,它们会按照您在上面链接中看到的那样步进。
What is a fix for this and why does it happen? 什么是解决这个问题,为什么会发生?
By default, inline-block
element's vertical alignment is baseline
. 默认情况下,
inline-block
元素的垂直对齐是baseline
。
Simply set vertical-align:top
on the .col
. 只需在
.col
上设置vertical-align:top
。
#body .col {
vertical-align: top;
}
use this 用这个
{
vertical-align: top;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.