砌体浮动：左&最大宽度 [英] Masonry float:left & max-width

问题描述

 <风格> 
 
 #container {
 float：left; 
最大宽度：900px; 
} 
 
 .item {
 float：left; 
 width：300px; 
} 
 
< / style> 
 
< div id =container> 
 
< div class =item>大部分文字< / div> 
< div class =item>很多文字< / div> 
< div class =item>很多文字< / div> 
< div class =item>很多文字< / div> 
< div class =item>很多文字< / div> 
< div class =item>很多文字< / div> 
< div class =item>很多文字< / div> 
 
< / div> 
  

Mansory在各种情况下工作都很棒：

• 适用于 #container max-width 属性


• 和 float：left 单独
  

如果应用 float：left & max-width 。

1. 如何使它以这种方式工作，在申请两个CSS属性后不能工作
   ？
   
2. 我需要浮动 #container 到左边，同时需要
   有 max-width 就可以了。有没有可能以某种方式做到这一点？ I
   尝试使用float：留在容器的父母身上，但没有运气。 砌体 #container 必须相对定位， .masonry-brick 元素通过布局引擎绝对定位，这就是砌体自动完成元素定位的关键。如果您自己更改了 .masonry-brick 元素的位置，那么您正在使用扳手。请参阅文档以及那里的许多示例。要改变 #container 的位置，只需观察Chrome的devtools的其他示例即可了解如何使用前面的元素，边距和填充符将其放到您想要的位置。
   
   

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

   1. How to make it working this way and why it is getting not working after applying both CSS properties?
   2. 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.

   解决方案

   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.

   这篇关于砌体浮动：左&最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！