Fatal编程技术网
  • html/
  • Html CSS-元素样式为内联块，具有统一的宽度和高度don'；不要形成网格

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

html css

Html CSS-元素样式为内联块，具有统一的宽度和高度don'；不要形成网格,html,css,Html,Css,我在理解以下方面有点困难： 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>

我在理解以下方面有点困难：

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>
由于所有项目都有统一的宽度和高度，我希望这些项目将显示在一个网格中，几乎像一张桌子。但是，在第一行中，item1与行的底部对齐，item2与行的顶部对齐！并且该行大于任一项的高度。为什么会发生这种情况

谢谢

卡尔

我曾经遇到过这种情况，通常在css定义中添加以下内容对我有帮助

float: left;  /* or right, whichever you prefer */
您需要将
vertical align:top
添加到
div.item
：

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

具体来说，关于“基线”的部分。首先，您的doctype是无效的-您可能希望解决这个问题，尽管这不应该是问题-它可能会导致其他一些问题

我建议阅读：

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

下面是另一本好书：

最后，这里是一些经过调整的CSS代码：

享受吧

你这里的事实有点不对劲<代码>是有效的doctype。阅读：和。你已经链接到一篇关于doctypes的文章，这篇文章已经有将近十年的历史了。是的，他没有浮动元素，但他使用了“显示：内联块”。阅读：。最后，您链接到w3schools-请不要这样做：不是每个人都可以或确实使用最新的浏览器（不幸的是），因此，明确提供新旧浏览器都能理解的doctype不会有什么坏处。W3Schools可能不是信息量最大的网站，它也不总是提供人们所寻找的确切答案，但它总是一个好的起点。至于内联块的行为，我认为是正确的-我们都可以从StackOverflow中学到一些东西：）你不应该链接到W3Schools，如果你经常这样做的话，那纯粹是出于自私的原因，它会让你落选。请仔细阅读：<代码>将在“所有浏览器”中触发标准模式。甚至IE6。没有人使用比IE6更老的东西。好吧，看起来你又抓住我了——我一直以为W3C学校实际上是W3C的附属机构，我过去也提到过它（虽然无可否认，没有什么比忘记标签名更复杂的了，但我总是将它作为绝对基础的来源——因此我可能从未发现任何错误，因为我没有寻找它们）。事实上，这让我很恼火，因为它不是W3的一部分，但它有点像是虚构的。现在我知道了，它们肯定不在我的圣诞卡列表中。@thirtydot-在FF4中，如果你点击我在问题评论中链接到的小提琴，我看不到你链接到的小提琴和我的小提琴之间有明显的区别（除了容器的宽度）。事实上，如果我删除宽度替代，它们看起来基本相同。@thirtydot-另外，我最初的想法是垂直对齐在错误的选择器上。是否只是另一个浏览器没有正确显示它（即，我试图不看你…）？@thirtydot-哦，我明白了。或者，我想，我没有看到。：）不，这不是IE的不当行为。这只是
display:inline block
的工作原理：请看我答案的底部。@thirtydot-谢谢，你帮助我更好地理解了发生了什么。这篇文章帮助我理解了什么是随机行为。 
float: left;  /* or right, whichever you prefer */

div.item {
    border: 1px solid black;
    display: inline-block;
    vertical-align: top;
    width: 255px;
    text-align: center;
    background-color: grey;
    height: 129px;
}

#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;

}