0

私はスケルトンに慣れていないので、手を置くだけです。4 列のブロック内に 1 行と 8 列のブロックが続き、8 列のブロック内には 2 つのネストされた行が混在するような作業を行うことができませんでした。それはすべてのグリッドを吹き飛ばすだけです。

画像ギャラリーのようなものを作成しようとしています。（申し訳ありませんが、まだ写真の例を投稿できません）

したがって、私のロジックでは次のようにする必要があります（実際のコードではなく、単なるサンプルコードです）：

<div class="container">
<div class="row">
    <div class="four columns">
            Picture content
    </div>
    <div class="eight columns">
        <div class="row">
            <div class="four columns alpha">
                Picture content
            </div>      
            <div class="four columns omega">
                Picture content
            </div>
        </div>  
        <div class="row">
            <div class="eight columns">
                Picture content
            </div>      
        </div>
    </div>      
</div>

インターネットで見つけたいくつかの説明に従いました。しかし、行と列の構造がどのように見えるべきか、まったく考えていませんか?

4

1 に答える 1

0

見つかった解決策:

私の間違い: 列の 2 番目のグループには、ネストされた行が含まれています。この行には、親の列グループ ビットの 8 列が含まれていません。

したがって、正しいコードは次のようになります。

    <div class="container">
        <div class="row">
            <div class="four columns">
                Picture content
            </div>
            <div class="eight columns">
                <div class="row">
                    <div class="six columns alpha">
                        Picture content
                    </div>      
                    <div class="six columns omega">
                        Picture content
                    </div>
                </div>  
                <div class="row">
                    <div class="twelve columns">
                        Picture content
                    </div>      
                </div>
            </div>      
        </div> 
    </div>

これにより、ネストされた行内のスペースが少し増えますが、スタイルを追加することで修正できます。

于 2015-04-06T11:45:18.763 に答える