我正在努力使这个布局按照我想要的方式工作。 正如你所看到的那样，4列出现在包装div之外，我不知道为什么。 此外，列将填充查询，因此我需要它们的高度是灵活的，但最后我需要所有列显示相同的高度。
这是布局直播www.onlinesportcenter.com
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>layout</title>
<style>
body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
background:#01245c;
font-family:arial, verdana, sans-serif;
font-size:75%;
overflow: hidden;
}
* html body {
padding:116px 0 20px 0;
}
.header-wrap {
position:absolute;
top:0;
height:116px;
width:100%;
}
.header-wrap #header{
margin:0 auto;
position:relative;
}
#header {
background: #666;
position:absolute;
top:0;
left:0;
width:1020px;
height:116px;
text-align:center;
padding:0;
margin:0;
}
* html #header {height:116px;}
.container-wrap {
position:absolute;
width:100%;
height:auto;
margin-top:116px;
margin-bottom:20px;
top:0;
bottom:0;
}
.container-wrap #container {
margin:0 auto;
position:relative;
top:0;
height:100%;
}
#container {
font-family: Arial, sans-serif;
font-size: 1em;
position:fixed;
top:116px;
left:0;
bottom:20px;
right:0;
background:#fff;
padding:0;
width:1020px;
}
* html #container {
height:100%;
width:1020px;
}
#container img {margin:0;}
#main {
background:#fff;
width:790px;
height:100%;
float:left;
overflow:auto;
}
.main-multi-form {
background:#efefef;
width:764px;
margin:4px;
border:1px solid #adadad;
vertical-align:top;
}
.main-multi-form-bettype {
background:#ddd;
height: 50px;
margin:8px 8px 0 8px;
padding: 14px 0 0 0;
text-align:center;
vertical-align:top;
}
.main-multi-form-bettype-extra {
background:#dddddd;
width:80%;
height: 24px;
vertical-align:top;
padding:0;
margin:0 auto 0 auto;
text-align:center;
}
.main-multi-form-events {
background:#ddd;
margin:8px 8px 8px 8px;
padding-top: 5px;
text-align:center;
vertical-align:top;
width: 748px;
}
.main-multi-form-column {
background: #efefef;
float:left;
width:177px;
margin: 5px;
}
.main-multi-form-sports{
background:#fff;
border:1px solid #666;
color: #333;
font-family: Arial, sans-serif;
font-size: 1em;
font-weight:bold;
height: 18px;
padding: 3px 0 0 0;
text-align:center;
vertical-align:top;
width:175px;
}
.main-multi-form-leagues{
padding: 0;
text-align:left;
vertical-align:top;
width:177px;
height:20px;
}
.main-multi-form-leagues-checkbox{
float:left;
margin: 0;
padding: 0;
vertical-align:top;
width:20px;
}
.main-multi-form-leagues-league{
float:right;
margin: 0;
padding: 0;
vertical-align:top;
width:157px;
height:20px;
}
.main-multi-form-leagues-league a,a:Hover,a:Visited{
color: #369;
font-family: Arial, sans-serif;
font-size: 0.9em;
font-weight:bold;
text-decoration:none;
}
#right {
width:228px;
height:100%;
float:right;
border-left:1px solid #73a2bd;
border-right:1px solid #73a2bd;
text-align:center;
}
.footer-wrap{
position:absolute;
bottom:0;
height:20px;
width:100%;
}
.footer-wrap #footer{
position:relative;
margin:0 auto;
}
#footer {
background: #666;
position:absolute;
bottom:0;
left:0;
width:1020px;
height:19px;
overflow:auto;
text-align:center;
border-top:1px solid #35759a;
}
* html #footer {height:20px;}
#footer p {
color:#fff;
font-size:1em;
margin:2px 0 0 0;
}
form {
margin:0;
padding:0;
}
select {
font-family: Arial,sans-serif;
font-size:1em;
color:#000000;
margin:0;
padding:0;
vertical-align:top;
font-size: 1em;
}
input {
font-family: Arial,sans-serif;
font-size:1em;
color:#000000;
margin:0;
padding:0;
vertical-align:top;
font-size: 1em;
}
hr
{
width:100%;
color: #000000;
height: 1px;
}
</style>
</head>
<body>
<div class="header-wrap">
<div id="header">
HEADER
</div>
</div>
<div class="container-wrap">
<div id="container">
<div id="main">
<div class="main-multi-form">
<div class="main-multi-form-bettype">
TOP MAIN
</div>
<div class="main-multi-form-events">
<div class="main-multi-form-column">
<div class="main-multi-form-sports">Column 1</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
</div>
<div class="main-multi-form-column">
<div class="main-multi-form-sports">Column 2</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
</div>
<div class="main-multi-form-column">
<div class="main-multi-form-sports">Column 3</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
</div>
<div class="main-multi-form-column">
<div class="main-multi-form-sports">Column 4</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
<div class="main-multi-form-leagues">
<div class="main-multi-form-leagues-checkbox">
<input class="Selection-Checkbox" type="checkbox" name="checkbox">
</div>
<div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>
</div>
</div>
</div>
</div>
</div>
<div id="right">
<br /><br />
RIGHT
</div>
</div>
</div>
<div class="footer-wrap">
<div id="footer">FOOTER</div>
</div>
</body>
</html>
答案 0 :(得分：0)
完成后你需要清除浮动。
在包装器的末尾添加<div style="clear:both"></div>。
答案 1 :(得分：0)
将其添加到.main-multi-form-events
overflow:hidden;
zoom:1; /*for IE*/
对每个有浮动子项的容器执行此操作。它使容器环绕那些漂浮的孩子。而且，这样做是为了一个不应该包围它的浮动兄弟的元素。