0

私は次のレイアウトを持っています。最初の行は問題なく印刷されますが、2 行目の最初の行は、2 行目の 2 番目の div があるべき場所から始まります。1 行目の最後の div のスパンを 3 に設定すると、2 行目が正常に出力されます。

親の div は 670 ピクセルで、各子は 160 ピクセルです (10 ピクセルの右マージンを含む) 4 つすべてが一列に収まるはずですが、そうではありません。

基本的に、17 スパンの親 div と、それぞれ 4 のスパンを持つ 4 つの子 div の行が必要です。

<div id="parent" class="span-17 last>
   <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4">
  <span>content</content>
  <span> image </content>
</div>
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4 last">
   <span>content</content>
   <span> image </content>
   </div>
<!--row 2 starts -->
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4 last">
   <span>content</content>
   <span> image </content>
   </div>
</div>
4

1 に答える 1

0

コンプレッサーを使用してデフォルトの列数を変更していない限り、ブループリントはデフォルトで 24 列を使用します。さらに、コンテナをどこかに定義する必要があります。

<div class="container">
    <div class="span-24 last">
        Header Row
    </div>
    <div class="span-4">
        Blank buffer div (to keep 24 cols)
    </div>
    <div class="span-4">
        Content 1
    </div>
    <div class="span-4">
        Content 2
    </div>
    <div class="span-4">
        Content 3
    </div>
    <div class="span-4">
        Content 4
    </div>
    <div class="span-4 last">
        Another blank buffer
    </div>
</div>

基本的に、すべての列が常に 24 になるようにする必要があります。宣言は、last欠落している列を埋めません。span-17あなたは4人の子供を持つdivに言及していますが、これは合計span-4されません。そこに列がありません。これにより、未定義の結果が生成されるか、少なくとも見栄えが悪くなります。

<div>buffer sが必要ない場合はspan-6、 for each を使用してください。これにより、4 つのブロックが 24 に均等に分割されます。

于 2010-06-23T20:01:46.203 に答える