多列CSS布局
[英]Multi column CSS Layout
问题描述
I am having a hard time trying to make this layout to work the way that I want. 
我很难使这种布局按我想要的方式工作。 As you can see the 4 columns appear outside of the wrapping div's and I don't know why. 如您所见，这4列显示在包装div之外，我不知道为什么。 Also the columns will be populated with a query so I need their height to be flexible but at the end I need all column to appear of the same height. 另外，列中将填充查询，因此我需要它们的高度灵活，但是最后我需要所有列都显示为相同高度。
Here is the layout live www.onlinesportcenter.com 这是现场直播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>
2 个解决方案
解决方案1
0 2012-02-18 23:56:10
You need to clear your float after you're done. 完成后，您需要清除浮动。
Add a <div style="clear:both"></div> at the end of the wrapper. 在包装器的末尾添加<div style="clear:both"></div> 。
解决方案2
0 2012-02-19 00:10:17
add this to .main-multi-form-events 将此添加到.main-multi-form-events
overflow:hidden;
zoom:1; /*for IE*/
do this to every container that has children that float. 对每个有子项浮动的容器执行此操作。 it makes the container wrap around those floating children. 它使容器包裹那些漂浮的孩子。 And also, do this to an element that is not supposed to wrap around it's floating sibling. 而且，对不应该环绕其浮动同级元素的元素执行此操作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
多列式CSS布局 - Multi-Column like CSS layout
CSS 多列布局边距问题 - CSS Multi Column Layout Margin Issue
css网格动态多列2维布局 - css grid dynamic multi column 2 dimentional layout
具有圆形边框的多列CSS布局 - Multi-column CSS layout with rounded borders
使用CSS在多列布局顶部的图像 - Image on the top of a multi-column layout with CSS
CSS3多列布局：如何设置特定列的样式 - CSS3 multi-column layout: How to style a particular column
如何在 CSS 多列布局中使单列居中 - How to center single column in CSS multi-column layout
CSS多列布局，窗口大小不会改变列间隙 - CSS multi-column layout with column gap not changing on window resize
移动友好的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
相关标签