インラインブロックを使用して入れ子になっていない Div を並べて配置するにはどうすればよいですか?

ネストされていない div を並べて配置する

ネストされていない div を操作する場合、それらを次に配置するのが難しい場合がありますお互いに。質問で説明されている状況と同様です:

<div id="parent_div_1">
<br> <div class="child_div_1">
<br> <div class='child_div_2'></div><br></div><p><div id='parent_div_2'><br> <div class='child_div_1' ></div><br> <div class='child_div_2'></div><br></div></p>
<p><div id='parent_div_3'><br> <div class='child_div_1'></div><br> <div class='child_div_2'></div><br></div><br></pre&gt ;</p><p>このシナリオでは、「child_div_1」と「child_div_2」の各ペアを並べて配置する必要があります。</p><p><strong>インライン ブロックを使用した解決策</strong></p> <p>Div はデフォルトではブロック要素であり、使用可能な幅全体を占有することを意味します。この問題を解決するには、「display:inline-block;」を使用できます。 property.</p><p><pre class="brush:php;toolbar:false"><br>.child_div_1, .child_div_2 {<br> display: inline-block;<br>}<br>

付き ' inline-block を指定すると、要素の流れを中断することなく div がインラインでレンダリングされます。ただし、これらは依然としてブロック要素として動作します。

インライン ブロックの利点

• float と比較して使いやすい
• 柔軟性が向上レイアウトと配置で
• 要素のサイズと間隔を正確に制御できます

詳細とより包括的な説明については、http://learnlayout で提供されているチュートリアルを参照してください。 .com/inline-block.html.

ログイン後にコピー