jquery - 砌体浮动：左和最大宽度

Question

<style>

#container {
  float: left;
  max-width: 900px;
}

.item {
 float: left;
 width: 300px;
}

</style>

<div id="container">

  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>

</div>

我让 Mansory 在所有情况下都工作得很好：

• 仅适用于#container max-width财产
• 并且float: left独自一人

float: left但遗憾的是，如果同时应用&的组合，它就不起作用max-width。

1. 如何使它以这种方式工作以及为什么在应用两个 CSS 属性后它无法工作？
2. 我需要向左浮动#container，同时需要max-width在它上面。有没有可能以某种方式做到这一点？我尝试使用 float: left on container's parents 但没有运气。

Answer 1

Masonry #container必须相对定位，.masonry-brick元素由布局引擎绝对定位 - 这就是 Masonry 自动计算元素定位的重点。如果您自己更改.masonry-brick元素的位置，您就是在使用扳手。请参阅文档和那里的许多示例。要更改#container的位置，只需使用 Chrome 的 devtools 观察其他示例，以了解如何使用前面的元素、边距和填充将其放置在您想要的位置。