JSFiddle

Question

我似乎无法做到这一点。第3个DIV不会正常排队。希望这是一件非常容易的事情。我试着在第二个DIV上放一个“浮动：左”，但这肯定是不对的。

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

Answer 1

试试这个：

<div style="width: 100%">
      <div style="width: 33%;display:inline-block">
           blah blah blah blah<p>
           And another thing...
      </div>
      <div style="width: 33%;display:inline-block ">
           blah blah blah<br>
           I told you so!
      </div>
      <div style="width: 33%; ;display:inline-block">
           blah blah blah<hr>
           So there!                
      </div>
</div>

Answer 2

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

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

JSFiddle

Answer 3

这是一种利用calc的替代方法。

HTML：

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

CSS：

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

查看@ http://jsfiddle.net/0fhpmuda/

您可以在calc()和支持@ http://caniuse.com/#search=calc

上找到更多文档

Answer 4

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

排列3个DIV，使它们在顶部对齐

4 个答案:

JSFiddle