液体布局中的重叠 div - CSS

Question

所以这是我的问题。我在页面上使用液体布局，以便网站始终适合窗口的宽度。工作完美，听起来很棒，对吧？我遇到的问题是，每当调整窗口大小时，div 就会开始移动、重叠并换行到下一行。

这是我的网站，因此您可以看到我在说什么：http://www.kaiserroof。 com/test/index2.html

我对CSS设计有点陌生。我确信有一个简单的解决办法，但我无法弄清楚。有人可以帮助我吗？ （请尽快。我已经准备好完成这个网站了:)）这是我的 CSS 代码：

html {
 padding: 0px;
 margin: 0px;
 width: 100%;
 position: static;
 border-collapse: collapse;
 overflow-x: hidden;
}
body {
 padding: 0px;
 margin: 0px;
 width: 100%;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 14px;
 color: #555;
 font-weight: 100;
 line-height: 18px;
}
#container {
 padding: 0px;
 margin: 0px;
 width: 100%;
 min-width: 600px;
 background: #eeeeee;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 14px;
 color: #555;
 font-weight: 100;
 line-height: 18px;
}
#row1 {
 width: 100%;
 float: left;
 background: #eeeeee;
}
#row2 {
 width: 100%;
 float: left;
}
#row3 {
 width: 100%;
 float: left;
 padding-top: 300px;
}
#row4 {
 width: 100%;
 float: left;
}
#row5 {
 width: 100%;
 float: left;
}
#logo {
 float: left;
 width: 13.5%;
}
#phone1 {
 width: 85%;
 float: left;
 text-align: right;
}
#phone2 {
 width: 79%;
 padding-right: 6%;
 float: left;
 height: 54px;
 text-align: right;
 vertical-align: top;
}
#buttonmenu {
 width: 86.5%;
 float: left;
 border: none;
 margin: 0px;
 padding: 0px;
 border-collapse: collapse;
 border-spacing: 0;
}
#backgroundleft {
 float: left;
 position: absolute;
 z-index: 1;
}
#intro {
 float: left;
 position: absolute;
 z-index: 2;
 padding-left: 15.5%;
}
#form {
 width: 34.5%;
 float: left;
 border-style: solid;
 border-width: 1px;
 border-color: #000;
 border-top-style: none;
 border-left-style: none;
 padding-bottom: 76px;
}
#estimates {
 padding-left: 20px;
 padding-top: 10px;
 padding-bottom: 20px;
}
#form1 {
 padding-left: 20px;
}
#welcome {
 width: 34.75%;
 float: left;
 border-style: solid;
 border-width: 1px;
 border-color: #000;
 border-top-style: none;
 border-left-style: none;
 border-right-style: none;
 text-align: center;
 padding-top: 10px;
}
#linksright {
 width: 30.5%;
 float: left;
 border-style: solid;
 border-width: 1px;
 border-color: #000;
 border-top-style: none;
 border-right-style: none;
 text-align: right;
 padding-top: 10px;
 padding-bottom: 92px;
}
#bottomleft {
 width: 23%;
 float: left;
 padding-left: 50px;
 padding-top: 10px;
}
#bottommiddle {
 width: 50%;
 float: left;
 padding-top: 10px;
 text-align: center;
}
#bottomright {
 width: 20%;
 float: left;
}
td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: #BBBBBB;
}
a {
 text-decoration: none;
 color:#000;
 line-height: 20px;
}
A:hover { 
 text-decoration: underline;
 color: #000 
} 
.alternate {
 padding-right: 20px;
}
.object { 
 outline: none;
}
#object { 
 outline: none;
 margin: 0; 
  display: block; 
}

Answer 1

有些东西不能换行，例如表单元素。您可以通过在每个列（#form、#welcome、#linksright）上设置 min-width 来隐藏问题，这样它们就不会缩小到超过某个点。或者 #container 上更大的单个最小宽度，因为 600px 显然不足以防止内容重叠。

Answer 2

如果没有相应的 HTML，就很难判断。但让我猜一下。当您使用“float”和“width: 100%”对齐许多元素时，它们不再位于文本流中。因此，它们可能不会随页面的其余部分调整大小。在某些元素上，使用“display: inline-block”而不是“float”可能会很有用。

Answer 3

我真的建议你只使用 3 列固定宽度布局。拉伸这些 div 看起来并不好，而且会让事情变得很奇怪。尝试将整个网站包装在包装 div 中，然后将其居中。这样你就不必处理拉伸 div 的疯狂问题。

div#wrapper{
   margin: 0 auto; // this will make everything center automatically.
   width: 960px;
}

很抱歉没有回答您的问题，但提出了不同的解决方案。我只是不喜欢液体布局。

Answer 4

您将外部的两列设置为静态宽度，并将中心设置为百分比。您还可以对左、右页边距使用百分比。