0

所以这是我的问题。我在我的页面上使用了一种液体布局，以便网站始终适合窗口的宽度。完美运行，听起来很棒，对吧？我遇到的问题是，每当调整窗口大小时，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; 
}
4

4 回答 4

1

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

于 2010-08-27T17:14:03.330 回答
0

You make the two outer columns a static width and make the center a percentage. You can also use a percentages for the left, right margins as well.

于 2011-06-01T15:36:30.227 回答
0

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

于 2010-08-27T17:14:49.013 回答
0

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

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

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

于 2010-08-27T20:27:36.680 回答