gpt4 book ai didi

html - CSS - 样式为具有统一宽度和高度的内联 block 的元素不形成网格

转载 作者:太空宇宙 更新时间:2023-11-04 05:22:23 27 4
gpt4 key购买 nike

我在理解以下内容时遇到了一些困难:

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: center;
background-color: grey;
height: 129px;
}

由于所有元素都具有统一的宽度和高度,所以我希望这些元素会像表格一样显示在网格中。但是,在第一行中,item1 与行的底部对齐,item2 与顶部对齐!并且该行大于任一元素的高度。为什么会这样?

谢谢,

卡尔

最佳答案

你需要添加vertical-align: topdiv.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;
}

要了解为什么需要这样做,我建议您阅读以下内容:

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

具体来说,就是“基线”部分。

关于html - CSS - 样式为具有统一宽度和高度的内联 block 的元素不形成网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6257271/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com