2

私が達成しようとしていることを説明するために作成した jsfiddle をお見せします。

http://jsfiddle.net/vraG7/3/embedded/result/

その部分のコードは次のとおりです。

<div class="row">
    <div class="twelve columns">
        <h2 class="first_column category_title">Nome Categoria</h2>

        <div class="row">
            <div class="nine columns thumbnail"><img
                src="http://www.placehold.it/125x125" alt=""></div>
            <div class="three columns date"><time
                datetime="2013-02-28" >28<br>02<br>2013</time></div>
        </div>
        <div class="row">
            <div class="twelve columns">
                <h2 class="post-title"><a href="">Titolto del post</a></h2>
            </div>
        </div>
    </div>
</div>


</div> <!-- category-column -->

私がやろうとしているのは、125x125 の画像とその右側の日付ボックスを、「ノーム カテゴリ」のオレンジ色のボックスと同じ幅にすることです。私はすべてを正しくやったと思っていましたが、どうやら何かが足りないようです。

4

1 に答える 1

3

問題が正確に何であるかを言うのは難しいです。多くの基礎スタイルをオーバーライドしています。多数の div の高さ、マージンなど。

1) 整列させたい背景色を に適用しています<h2>。含む に適用することをお勧めし<div>ます。h2 は div の端を処理しないため、それらを揃えることはできません。

2) 背景に色を適用した日付。それらがすでに調整されている可能性があります。上記を変更した場合。

3) ネストされたグリッドのトラブルシューティングでは、すべてのグリッドにクラスを簡単に追加できpanelます。これにより、間隔が広がりますが、ネストされた各グリッドの相互関係を確認できます。

これは基礎4にありますが、役に立つかもしれません:

http://foundation.zurb.com/grid-example2.php

于 2013-03-04T01:26:50.133 に答える