使用`float：left`时每行一个div？

Question

我有以下HTML和CSS

http://jsfiddle.net/x7zr999s/

如果浏览器足够小，它会提供所需的结果：

但如果足够大，每行有两个或更多项目：

有没有办法在不禁用float: left或启用任何破坏它的情况下阻止这种情况？我希望帖子像图片一样“包裹”原始帖子。

Answer 1

出现此问题是因为div上有固定宽度。在您的fiddle中，您已经div，宽度为100，因此当屏幕显示时，以及因为您的div都是floated left，在额外的空间，这就是你的情况。

// this code is from the fiddle you create

<div class="reply" width=100 height=100>reply <a href="#">1</a></div>

有一些方法可以解决这个问题。并且简单的方法是包裹你的div并放置你想要的确切宽度。所以当你的浮动div屏幕保持在同一位置时，屏幕就会显示出来。

这是demo。

在演示中，我在div的结尾tag之前添加了额外的div wrapper，并且class名称blocker有助于不破坏您的布局。如果您能看到自己的风格，则blocker style课程为clear:both，本文将介绍Clearing floats

希望这有帮助...

Answer 2

您可以将代码插入包装器并为其指定最大宽度：

#wrap {
  width: 100%;
  max-width: 1400px;
}
.op, .reply {
  float: left
}
.reply {
  min-width: 51%;
}

<div id="wrap">
  <div class="op"></div>
  <div class="reply"></div>
  <div class="reply"></div>
  <!-- ... more to go ... -->
</div>

Answer 3

将CSS属性max-width设置为父div。它设置了父级可以扩展到的最大宽度。默认宽度是窗口大小的100％。但是max-width属性会限制宽度在指定的最大值之后进一步扩展。

如果所需的父级宽度可用，则向左浮点环绕子元素。在您的情况下，可以通过不允许父级的宽度在某个点之后扩展来限制它，以使子级div包裹在给定的空间内，即在1列中（必填）。