液体布局中的重叠div - CSS [英] Overlapping divs in liquid layout - CSS

问题描述

所以这是我的问题。我在页面上使用液体布局，以便该网站始终适合窗口的宽度。完美的作品，听起来不错，对吧？我遇到的问题是，无论何时调整窗口大小，div都会开始移动，重叠并包装到下一行。

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

我对css设计有点新鲜。我确信有一个简单的解决方法，但我无法弄清楚。有人能帮我吗？ （很快，请准备好用这个网站:)）这是我的CSS代码：

  html {
 padding：0px; 
 margin：0px; 
宽度：100％; 
 position：static; 
 border-collapse：collapse; 
 overflow-x：hidden; 
} 
 body {
 padding：0px; 
 margin：0px; 
宽度：100％; 
 font-family：Tahoma，Geneva，sans-serif; 
 font-size：14px; 
颜色：＃555; 
 font-weight：100; 
 line-height：18px; 
} 
 #container {
 padding：0px; 
 margin：0px; 
宽度：100％; 
 min-width：600px; 
背景：#eeeeee; 
 font-family：Tahoma，Geneva，sans-serif; 
 font-size：14px; 
颜色：＃555; 
 font-weight：100; 
 line-height：18px; 
} 
＃row1 {
 width：100％; 
 float：left; 
背景：#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; 
宽度：13.5％; 
} 
＃phone1 {
 width：85％; 
 float：left; 
 text-align：right; 
} 
＃phone2 {
 width：79％; 
填充权：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; 
位置：绝对; 
 z-index：1; 
} 
 #intro {
 float：left; 
位置：绝对; 
 z-index：2; 
填充剩余：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; 
背景：#BBBBBB; 
} 
 a {
 text-decoration：none; 
颜色：＃000; 
 line-height：20px; 
} 
 A：悬停{
 text-decoration：underline; 
 color：＃000 
} 
 .alternate {
 padding-right：20px; 
} 
 .object {
 outline：none; 
} 
 #object {
 outline：none; 
保证金：0; 
 display：block; 
} 
  

解决方案

被包装到一个新的行，如表单元素。您可以通过在每一列上设置 min-width 来隐藏问题（#form，＃welcome，#linksright），这样它们就不会缩小超过某个点。或#container上较大的单个最小宽度，因为600px显然不足以防止重叠。

So here's my problem. I am using a liquid layout on my page, so that the site always fits the width of the window. works perfectly, sounds great, right? the problem that i'm having is that whenever the window is resized, the divs start moving, overlapping, and wrapping to the next line.

here's my site, so you can see what i am talking about: http://www.kaiserroof.com/test/index2.html

i'm somewhat new to css design. i'm sure there is an easy fix, but i can't figure it out. can someone help me? (soon, please. i'm so ready to be done with this website :) ) Here is my CSS code:

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; 
}

解决方案

Some things just can't be wrapped onto a new line, such as form elements. You can hide the problem by setting a min-width on each of those columns (#form, #welcome, #linksright), so they won't shrink down past a certain point. Or a larger single min-width on #container, since 600px obviously isn't enough to keep stuff from overlapping.

这篇关于液体布局中的重叠div - CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！