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

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

液体布局中重叠的div - CSS

4 个答案: