3

コレクション内のNノードに基づいて子divを生成するコードがあり、1つ以上のノードになる可能性があるため、結果のhtmlは次のようになります。

<div class='parent_div'>
<div class ='child_div'></div>
<div class ='child_div'></div>
</div>

<div class='parent_div'>
<div class ='child_div'></div>
<div class ='child_div'></div>
<div class ='child_div'></div>
</div>

すべての子ノードを並べると、CSS はどのようになりますか?

これは、実際に起こっていることにはるかに近い、より堅牢な jsFiddler の例です。Firefox または IE で動作させることができません:

http://jsfiddle.net/scarleton/GqjtC/10/

ここで私が助けを求めていることの一部は、列を正しく配置する最善の方法です。パーセンテージまたは実際のピクセルを使用する必要がありますか? わかりません。どちらにもオープンです。アドバイスが必要です。

4

5 に答える 5

5

float:leftまたは使用できますdisplay:inline-block

浮く

.child_div{
   float: left;
}
.parent_div{
    clear:both;
}

フィドル

インラインブロック

.child_div{
   display: inline-block;
   vertical-align: top;
}

フィドル

ノート

  • 空白はスペースを占有します (ブロック レベル要素の先頭または末尾を除く)。float を使用してこれを克服するか、スペースを削除します。
  • フロートをクリアする兄弟が存在しない限り、フロート要素の寸法は親に影響しません
  • ボーダーとパディング メイクアップの余分な幅はbox-sizingを使用します: これを克服するためのボーダー ボックス

インラインブロック - http://jsfiddle.net/GqjtC/8/

フロート - http://jsfiddle.net/GqjtC/9/

于 2012-07-08T01:04:03.920 に答える
3

試す：

.child_div {
    float: left
}

私が考えていたいくつかのポイント：

  • child_div を左にフロートさせるだけでなく、次のようなよりコンテキストに応じたセレクターを作成することを検討します。

    .parent_div > div {
    float: left;
}

    これは基本的に、div直接の子である s.parent_divが浮動されることを意味します。

  • フローティングには欠点があります。すべての子がフローティングされている場合、親コンテナーは子の高さを保持しません。.parent_divそのため、 が子を囲む境界付きのボックスであると想定される場合は、追加の CSS またはマークアップが必要になる場合があります。

  • display: inline-block欠点があります: ブラウザ間の互換性の問題が発生する可能性があります。

動的な数の列がある場合、幅の設定が難しくなる可能性があります。これが当てはまるかどうかはわかりませんが、960.gsなどのグリッド システムを調べることをお勧めします。幸運を！

于 2012-07-08T00:47:35.080 に答える
2

If you want them all in a line, you would have to know the width of each one. If you just want them to continuously loop like text normally does, there are a couple of different solutions.


Option 1

You can treat them like list items in a ul and have this for your css:

.parent_div .child_div {
  ...
  display: inline;
}


Option 2

You can float each div to the left or the right, depending on which side you want them to come from:

.parent_div .child_div .from_right {
  ...
  float: right;
}

.parent_div .child_div .from_left {
  ...
  float: left;
}


Option 3

Like I was saying above, you need to know the width of each div to be able to make them all appear in a single line on the screen. If you don't know how many elements there will be, you can consider making a table (gasp!) to hold them instead of using divs, like so:

<table class="data">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Just make sure everything is in the same tr. Otherwise, the lines will wrap. The advantage of this is you can loop your creation script to make a certain, flexible number of elements appear in a row without even having to touch your css.

于 2012-07-08T01:00:08.297 に答える
1

child-div にこれを追加します。

.child_div{
   ...
   float: left;
   ...
 }
于 2012-07-08T00:47:44.777 に答える
1

What Razvan and Tuanderful said, but you will need to also set widths in there somewhere too - whether it is just the .parent_div, or both the .parent_div and .child_div.

Good luck!

于 2012-07-08T00:56:50.303 に答える