CSS - 样式为具有统一宽度和高度的内联块的元素不形成网格 - CSS - Elements styled as inline-block with uniform width and height don't form a grid 小贝子编程网

我在理解以下内容时遇到了一点困难：

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与顶部对齐！并且该行大于任一项的高度。为什么会发生这种情况？

谢谢，

Carl

您需要将vertical-align: top添加到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;
}

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

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

具体来说，是关于"基线"的部分。

我遇到过这种情况，通常在两个css定义中添加以下内容可以帮助我

float: left;  /* or right, whichever you prefer */

首先，您的doctype无效-您可能需要解决这个问题，尽管这不应该是问题所在-它可能会导致其他问题。

我建议阅读：http://www.alistapart.com/articles/doctype/

你没有浮动你的div——CSS中的块级元素就像它穿过整个容器一样——即使它的宽度意味着它不会以这种方式明显呈现。通过使用FLOAT，您可以更改这种行为。

以下是另一本好书：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;
}

最后，这里有一个经过调整的CSS代码：http://jsfiddle.net/wmxEb/1/

享受吧！

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

相关内容

最新更新

热门标签：