砌體浮動：左和最大寬度

<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爲在偉大的所有情況下工作：砌體浮動：左和最大寬度

與應用單獨#containermax-width財產
和float: left單獨

但可悲的是如果應用組合float: left & max-width它不工作。

如何使它以這種方式工作以及爲什麼它越來越同時應用CSS屬性後不工作？
我需要漂浮#container到左邊，同時需要有max-width就可以了。有沒有可能以某種方式做到這一點？ I 嘗試使用float：留在容器的父母身上，但沒有運氣。

來源

2012-09-03 slfkjsdlfkj

砌築的#container必須定位相對的，.masonry磚元素定位在由佈局引擎絕對的 - 這是關於砌體自動工作了元素的定位整點。如果您自己更改了.masonry-brick元素的位置，那麼您正在將扳手放入作品中。見the documentation和那裏的很多例子。要更改＃容器的位置，只需觀察Chrome的devtools的其他示例，即可瞭解如何使用前面的元素，邊距和填充將其放到您想要的位置。

來源

2012-09-03 06:20:52 Systembolaget

問題是我不改變.masonry-brick的定位。我只想將#container改爲在'max-width'的同一時刻擁有'float：left'。爲什麼組合中的這兩個屬性使砌體不能正常工作？ – slfkjsdlfkj

查看原始插件代碼https://github.com/desandro/masonry/blob/master/jquery.masonry.js，您可以看到，爲了工作，該插件設置#container的位置相對。這是因爲磚匠元素需要擁有絕對的位置，以他們的方式來展示 - 這就是插件的全部目的。爲什麼你認爲你的佈局需要漂浮#container？很可能，您的佈局可以通過其他方式實現。但是，這是另一個問題，你必須看看你的頁面佈局應該如何。 – Systembolaget

請參閱http://css-tricks.com/absolute-positioning-inside-relative-positioning/爲什麼div的相對位置對於其中包含的div的絕對定位是必需的。 – Systembolaget

砌體浮動：左和最大寬度

回答

相關問題