多列CSS布局
[英]Multi column CSS Layout
问题描述
我很难使这种布局按我想要的方式工作。 如您所见，这4列显示在包装div之外，我不知道为什么。 另外，列中将填充查询，因此我需要它们的高度灵活，但是最后我需要所有列都显示为相同高度。
这是现场直播www.onlinesportcenter.com
码
<!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>
2 个解决方案
解决方案1
0 2012-02-18 23:56:10
完成后，您需要清除浮动。
在包装器的末尾添加<div style="clear:both"></div> 。
解决方案2
0 2012-02-19 00:10:17
将此添加到.main-multi-form-events
overflow:hidden;
zoom:1; /*for IE*/
对每个有子项浮动的容器执行此操作。 它使容器包裹那些漂浮的孩子。 而且，对不应该环绕其浮动同级元素的元素执行此操作。
移动友好的CSS多列布局，可将内容限制为特定列
[英]Mobile friendly CSS multi column layout that restricts content to a specific column
CSS; 坚不可摧的文本不会在多列布局中生成滚动条
[英]CSS; Unbreakable text does not produce scrollbars in multi-column layout
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.