网页布局问题答案

【问题标题】：Webpage Layout Issue网页布局问题
【发布时间】：2017-01-17 06:32:13
【问题描述】：

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

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

【问题讨论】：

请发布包含您的问题的 CSS 和 HTML 部分
您是否浮动这些 div 以使它们彼此相邻？
将min-width 添加到您的body 标记至少两个div 的宽度是一种可能的解决方案，但是如果没有您的代码，很难完全理解您的情况。
使用中心标签可能对你有帮助

标签： html css tablelayout

【解决方案1】：

解决此问题的一种方法是在 div 之外放置一个表格。如果表格位于结构 div 内，则调整浏览器大小不会强制一个 div 向下移动。

【讨论】：

【解决方案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>

【讨论】：