2

Web サイト ページのメイン コンテンツ領域に画像とコンテンツのグリッドを追加したいと考えています。基本的な 2 列のテンプレートがあり、グリッドを大きなコンテンツ エリアに配置したいと考えています。すべてが正常に機能しますが、ポートレートにサイズ変更するとすぐに、div 間のマージンがすべて失われます。これらのアイテムをスケルトンでグループ化する適切な方法が何であるかはよくわかりません。行ごとにコンテナを終了する必要がありますか? どんな助けや提案も大歓迎です。

<div class="container">
    <div class="four columns"></div>
    <div class="twelve columns">

        <!-- grid goes here -->
        <div class="container">
        <div class="six columns alpha"></div>
        <div class="six columns omega"></div>
        <div class="six columns alpha"></div>
        <div class="six columns omega"></div>
        </div>


    </div><!-- end twelve columns>
</div><!-- end container -->
4

2 に答える 2

3

これまで誰もこれに答えていないようです。あなたはすでにこれを解決していると思いますので、この答えは見つけようとしている他の人のためのものです

問題は、containerクラスの幅が 960 ピクセルに固定されているため、ネストできないことです。2 番目の問題は、(ネストしようとしている) 内部の列が列数を超えていることです。 「clearfix」クラスを参照してください。オフハンド、これは私が見つけた最もクリーンなソリューションでした：

<div class="container">
    <div class="four columns">four columns</div>
    <div class="twelve columns">
        <div class="sixteen columns clearfix">                                                                                                                   
            <div class="three columns alpha"> first</div>
            <div class="three columns">second</div>
            <div class="three columns">third</div>
            <div class="three columns omega">fourth</div>
        </div><!-- end clearfix -->
    </div><!-- end twelve columns>
</div><!-- end container -->
于 2014-01-29T10:26:58.433 に答える