CSS - Elements styled as inline-block with uniform width and height don't form a grid
I am having a little trouble understanding the following:
test.html
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>CSS Test</title>
<link rel="stylesheet" type="text/css" media="all" href="test.css" />
</head>
<body>
<div id="id_main">
<div id="id_item1" class="item">
<p>Item 1</p>
</div>
<div id="id_item2" class="item">
<p>
Item 2 - This item has more text than the first item
and it shows because the text wraps around and changes
the vertical size of the item.
</p>
</div>
<div id="id_item3" class="item">
<p>Item 3</p>
</div>
<div id="id_item4" class="item">
<p>Item 4</p>
</div>
<div id="id_item5" class="item">
<p>Item 5</p>
</div>
</div>
</body>
</html>
test.css
#id_main {
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: teal;
vertical-align: top;
}
div.item {
border: 1px solid black;
display: inline-block;
width: 255px;
text-align: cente开发者_如何学JAVAr;
background-color: grey;
height: 129px;
}
Since the items all have uniform widths and heights, I was expecting that the items would display in a grid almost like a table. In the first row, though, item1 is aligned with the bottom of the row and item2 is aligned with the top! And the row is larger than the height of either item. Why does this happen?
Thanks,
Carl
You need to add vertical-align: top to div.item:
http://jsfiddle.net/DZzc5/2/
div.item {
border: 1px solid black;
display: inline-block;
vertical-align: top;
width: 255px;
text-align: center;
background-color: grey;
height: 129px;
}
To understand why this is required, I recommend you read this:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Specifically, the part talking about "the baseline".
I've had this happen to me, usually adding the following in both css definition helps me
float: left; /* or right, whichever you prefer */
Firstly, your doctype is invalid - you might want to address that, though that shouldn't be the problem - it can cause some others.
I recommend reading: http://www.alistapart.com/articles/doctype/
You didn't float your divs - a block level element in CSS acts as though it goes across its whole container - even if it has a width that means it doesn't visibly render that way. By using FLOAT, you can change this behavior.
Here's another good read: http://www.w3schools.com/css/css_float.asp
#id_main {
width: 820px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color: teal;
vertical-align: top;
}
div.item {
border: 1px solid black;
width: 400px;
height: 129px;
overflow: hidden;
text-align: center;
background-color: grey;
float: left;
}
Finally, heres a fiddle of your code with tweaked CSS: http://jsfiddle.net/wmxEb/1/
Enjoy!
加载中,请稍侯......
精彩评论