css - css グリッドを使用して Div が正しく整列しない

Question

私はこのページで 960 Grid System を使用しており、ここで私の instapaper ブックマークを一覧表示しています: http://labs.tonyhue.com/bookmarks/

ただし、ソーシャル メディアのセクションは他とは一線を画しています。これは、プログラミング セクションに続いて右揃えにする必要があります。何か案は？

Answer 1

-Containerに (固定) 高さを追加します.grid_6。

.grid_6 {height:250px; /*or something else*/}

あなたの問題は、高さが異なる浮動要素で発生します。

フローティングについての読み物: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

編集: それ以外の場合は、フロートをクリアするためにラッパー要素を追加できます:

<div class="wrapper">
     <div class="grid_6"></div>
     <div class="grid_6"></div>
</div>

<div class="wrapper">
     <div class="grid_6"></div>
     <div class="grid_6"></div>
</div>

フロートをクリアするには、.wrapper {overflow:hidden;} またはclearfix メソッドを使用できます: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/