html - 网页布局问题

Question

我的网页布局有问题。我有 2 个表，而这 2 个表都在 2 个 div 内。我遇到的问题是，当我的网络浏览器调整大小时，第二个 div 中的内容移动到第一个 div 下方。

谁能告诉我如何解决这个问题？

Answer 1

解决此问题的一种方法是将表格放在 div 之外。如果表格位于结构 div 内，则调整浏览器大小不会强制一个 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>

此外，如果您使用浮动，它会有效地从任何周围的 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>