Html 将3个div排成一行，这样它们'；在顶部重新对齐_Html

Html 将3个div排成一行，这样它们'；在顶部重新对齐

html

Html 将3个div排成一行，这样它们'；在顶部重新对齐,html,Html,我似乎不能把这个弄对。第三个分区不能正确排列。希望这是件非常容易的事。我也试着在第二个DIV上放一个“float:left”，但那肯定不对 <html> <head> </head> <body> <div> <div style="width: 390px; float:left"> blah blah blah blah<p>

我似乎不能把这个弄对。第三个分区不能正确排列。希望这是件非常容易的事。我也试着在第二个DIV上放一个“float:left”，但那肯定不对

<html>

<head>
</head>

<body>

    <div>
          <div style="width: 390px; float:left">
               blah blah blah blah<p>
               And another thing...
          </div>
          <div style="width: 390px; margin-left: 400px;">
               blah blah blah<br>
               I told you so!
          </div>
          <div style="width: 390px; margin-left: 800px;">
               blah blah blah<hr>
               So there!                
          </div>
    </div>

</body>

</html>


废话废话废话
还有一件事。。。
废话废话

我告诉过你的！
废话废话
就这样！

或者，浮动所有3个div，确保父div可以容纳它们。

尝试以下操作：


废话废话废话
还有一件事。。。
废话废话

我告诉过你的！
废话废话
就这样！

您应该使用百分比，而不是使用设置的像素宽度，否则您将无法在所有屏幕尺寸上获得所需的效果。此外，我建议使用一个框架，例如具有预定义网格的框架，以确保跨浏览器兼容性。但是，如果您只想使用HTML/CSS，可以删除所有内联CSS并执行以下操作：

div > div {
    width:33%;
    display:inline-block;
    padding:0;
    margin:0;
}

这里有一种利用calc的替代方法

HTML:

查看@

你可以在

calc（）

和support@

上找到更多的文档，如果你想让它们都显示在一行中，请将它们设置为display:inline block，并确保窗口足够宽，可以容纳所有三个。这应该是一个注释。这将所有3个叠在一起，我在我的电脑及其工作中尝试过这一点。正在使用哪个浏览器？我在这台机器上安装了IE9。您是否在另一个dom元素而不是正文中安装了父div？我已经在我的ie中尝试过了，它是workAnd

padding:0；保证金：0（边距部分是可选的，只需确保它们只有33%的宽度）。但是，是的，对于三列，您也可以使用宽度：33.3334%。
div > div {
    width:33%;
    display:inline-block;
    padding:0;
    margin:0;
}

<div>
    <div><img src="http://placehold.it/300/"/></div>
    <div><img src="http://placehold.it/300/"/></div>
    <div><img src="http://placehold.it/300/"/></div>
</div>

div {
    width: 100%;
    overflow: auto;
}
div div {
    width: calc(100% / 3);
    float: left;
}
img {
    width: 100%;
}