Masonry float:left & max-width

问题

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

I get Mansory working in all situations great:

with applied to #container max-width property alone
and float: left alone

But sadly it is not working if apply combo of both float: left & max-width.

How to make it working this way and why it is getting not working after applying both CSS properties?
I need float #container to the left and in the same time need to have max-width on it. Is there any possibility to do it somehow? I tried use float: left on container's parents but no luck.

回答1:

The Masonry #container must be positioned relative, the .masonry-brick elements are positioned absolute by the layout engine - that's the whole point about Masonry working out the positioning of elements automatically. If you change the positioning of the .masonry-brick elements yourself, you're putting a spanner in the works. See the documentation and the many examples out there. To change the position of the #container, just observe other examples with Chrome's devtools to see how with preceding elements, margins and padding you can put it where you want.

来源：https://stackoverflow.com/questions/12240917/masonry-floatleft-max-width

标签

jquery

html

css

jquery-masonry