☰

これら 2 つの div を並べて表示するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon css layout html
これら 2 つの div を並べて表示するにはどうすればよいでしょうか? 質問する

ネストされていない div が 2 つあり、一方が他方の下にあります。どちらも 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

ベストアンサー1

divはデフォルトでblock要素 - つまり、利用可能な幅全体を占めることになります。次のものを使用してみてください -

display:inline-block;

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

このテクニックは、s と格闘するより簡単だと思いますfloat。

詳細についてはこのチュートリアルをご覧ください -http://learnlayout.com/inline-block.html. この記事につながる以前の記事もぜひ読んでみてください。(いいえ、私が書いたわけではありません)

おすすめ記事