web-dev-qa-db-ja.com

これら2つのdivを並べて取得する方法は？

ネストされていない2つのdivがあり、一方が他方の下にあります。これらは両方とも1つの親div内にあり、この親divは繰り返されます。本質的に：

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

child_div_1とchild_div_2の各ペアを隣り合わせに取得したい。これどうやってするの？

csslayouthtml
86
Justin Meltzer
#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

http://jsfiddle.net/c6242/1/ で動作例を確認してください

66
Hussein

デフォルトではdivは block 要素であるため、使用可能な全幅を占めることになります。

display:inline-block;

divはインラインでレンダリングされるようになりました。つまり、要素のフローを中断しませんが、ブロック要素として扱われます。

この手法は、floatsと格闘するよりも簡単です。

詳細については、このチュートリアルを参照してください- http://learnlayout.com/inline-block.html 。それまでの以前の記事もお勧めします。 （いいえ、私はそれを書きませんでした）

106
Robin Maben

私は以下のコードが非常に有用であることがわかりました。

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>
36
axs

flexboxを使用すると、非常に簡単です！

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

フィドルの例

5
Sol

私に最適なベスト：

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }


http://jsfiddle.net/jiantongc/7uVNN/

4
jiantongc

スタイルを使用する

.child_div_1 {
    float:left
}
3
amit_g

子divクラスのユーザーfloat:leftプロパティ

div構造の詳細を確認してください： http://www.dzone.com/links/r/div_table.html

1
Pranay Rana

フレックスボックスを使用する

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }
1
dasfdsa