html - ウェブページのレイアウトの問題

Question

Web ページのレイアウトに問題があります。私は2つのテーブルとそれらの2つのテーブルの両方を2つのdiv内に持っています。私が抱えている問題は、Web ブラウザーのサイズを変更すると、2 番目の div のコンテンツが最初の div の下に移動することです。

誰でもこれを修正する方法を教えてもらえますか?

Answer 1

これを修正する 1 つの方法は、テーブルを div の外に置くことです。テーブルが構造 div 内にある場合、ブラウザーのサイズを変更しても、1 つの div が強制的に下に移動することはありません。

Answer 2

次のようなことを試すことができます：

CSS
#leftcolumn { width: 300px; border: 1px solid red; float: left}
#rightcolumn { width: 300px; border: 1px solid red; float: right}

HTML
<div id="leftcolumn"><p>text goes here</p></div>
<div id="rightcolumn"><p>text goes here</p></div>

また、float を使用すると、周囲の div からその要素が効果的に削除されます。この問題を回避するには、'clear' を 'both' に設定した div クラスを html に追加してみてください。これにより、すべての div がコンテナ内にうまく配置されます

このような：

CSS
.clear { clear: both;}

HTML
<div id"container">
  <div id="leftcolumn"><p>text goes here</p></div>
  <div id="rightcolumn"><p>text goes here</p></div>
  <div class"clear"></div>
</div>