css - CSS div 配置レイアウト

Question

CSS div の配置に問題があります。アライメントがおかしいと思います。現在は左側にあり、中央に配置したほうがよいでしょう。

http://bit.ly/VOqkhw

div ".post" とフローティングを試してみましたが、うまくいきませんでした。これを解決することは可能ですか？

ありがとう。

Answer 1

div postwrapper を Fooligrid div に配置してから、Foliogrid に text-align center を配置してみてください。

Answer 2

このようなレイアウトでは通常、Javascript を多用する必要があります。あなたがしようとしていることを達成する方法の 1 つは、N 列を作成し、JS を使用して動的に入力し、@media クエリを使用して列を非表示/表示することです。この場合、HTML は次のようになります。

<div class="content">
    <div class="column">
        <div class="post">
        ...
        </div>
        <div class="post">
        ...
        </div>
    </div>
    <div class="column">
        <div class="post">
        ...
        </div>
        <div class="post">
        ...
        </div>
    </div>
</div>

( jQuery $(window).resize()) では、 を追加または削除し、幅と高さに基づいて をcolumn再配置します。postそして、メディア クエリを使用して、表示される列の幅を設定します。

@media all and (max-width:1000px) {
    .column{width:50%;} /*that would make two equal columns
    when the screen width <=1000 */
}

@media all and (max-width:1500px) {
    .column{width:33.3333%;} /*that would make three equal columns
    when the screen width <=1500 */
}

.post {width:100%;}
.column {float:left;}

詳細を提供すると、より詳細な回答が得られ、反対票が少なくなります。