多列CSS布局
我很难让这个布局按照我想要的方式工作。 正如您所看到的，4列出现在包装div的外部，我不知道为什么。 此外，列将填充一个查询，所以我需要它们的高度灵活，但在最后，我需要所有列显示相同的高度 以下是www.onlinesportcenter.com的现场布局 代码多列CSS布局,css,layout,Css,Layout,我很难让这个布局按照我想要的方式工作。 正如您所看到的，4列出现在包装div的外部，我不知道为什么。 此外，列将填充一个查询，所以我需要它们的高度灵活，但在最后，我需要所有列显示相同的高度 以下是www.onlinesportcenter.com的现场布局 代码 布局 身体{ 保证金：0； 边界：0； 填充：0； 身高：100%； 最大高度：100%； 背景：#01245c； 字体系列：arial，verdana，无衬线； 字体大小：75%； 溢出：隐藏； } *html正文{ 填充：116p
布局
身体{
保证金：0；
边界：0；
填充：0；
身高：100%；
最大高度：100%；
背景：#01245c；
字体系列：arial，verdana，无衬线；
字体大小：75%；
溢出：隐藏；
}
*html正文{
填充：116px 0 20px 0；
}
.收割台包装{
位置：绝对位置；
排名：0；
高度：116px；
宽度：100%；
}
.收割台包装#收割台{
保证金：0自动；
位置：相对位置；
}
#标题{
背景:#666；
位置：绝对位置；
排名：0；
左：0；
宽度：1020px；
高度：116px；
文本对齐：居中；
填充：0；
保证金：0；
}
*html#标题{高度：116px；}
.集装箱包装{
位置：绝对位置；
宽度：100%；
高度：自动；
边缘顶部：116px；
边缘底部：20px；
排名：0；
底部：0；
}
.集装箱包装#集装箱{
保证金：0自动；
位置：相对位置；
排名：0；
身高：100%；
}
#容器{
字体系列：Arial，无衬线；
字号：1em；
位置：固定；
顶部：116px；
左：0；
底部：20px；
右：0；
背景：#fff；
填充：0；
宽度：1020px；
}
*html#容器{
身高：100%；
宽度：1020px；
}
#容器img{margin:0；}
#主要{
背景：#fff；
宽度：790px；
身高：100%；
浮动：左；
溢出：自动；
}
.主要多种形式{
背景：#efef；
宽度：764px；
保证金：4倍；
边框：1px实心#adadad；
垂直对齐：顶部；
}
.main多格式bettype{
背景：ddd；
高度：50px；
保证金：8px 8px 0 8px；
填充：14px0；
文本对齐：居中；
垂直对齐：顶部；
}
.主多格式bettype extra{
背景：#dddddd；
宽度：80%；
高度：24px；
垂直对齐：顶部；
填充：0；
边距：0自动0自动；
文本对齐：居中；
}
.主要多形式活动{
背景：ddd；
保证金：8px 8px 8px 8px；
垫面：5px；
文本对齐：居中；
垂直对齐：顶部；
宽度：748px；
}
.主多表格栏{
背景：#efef；
浮动：左；
宽度：177px；
保证金：5px；
}
.主要的多形式运动{
背景：#fff；
边框：1px实心#666；
颜色：#333；
字体系列：Arial，无衬线；
字号：1em；
字体大小：粗体；
高度：18px；
填充：3px0；
文本对齐：居中；
垂直对齐：顶部；
宽度：175px；
}
.主要多形式联盟{
填充：0；
文本对齐：左对齐；
垂直对齐：顶部；
宽度：177px；
高度：20px；
}
.主多形式联盟复选框{
浮动：左；
保证金：0；
填充：0；
垂直对齐：顶部；
宽度：20px；
}
.主要多形式联赛{
浮动：对；
保证金：0；
填充：0；
垂直对齐：顶部；
宽度：157px；
高度：20px；
}
.主要多形式联赛联赛a，a:悬停，a:参观{
颜色：#369；
字体系列：Arial，无衬线；
字号：0.9em；
字体大小：粗体；
文字装饰：无；
}
#对{
宽度：228px；
身高：100%；
浮动：对；
左边框：1px实心#73a2bd；
右边框：1px实心#73a2bd；
文本对齐：居中；
}
.页脚换行{
位置：绝对位置；
底部：0；
高度：20px；
宽度：100%；
}
.页脚换行#页脚{
位置：相对位置；
保证金：0自动；
}
#页脚{
背景:#666；
位置：绝对位置；
底部：0；
左：0；
宽度：1020px；
高度：19px；
溢出：自动；
文本对齐：居中；
边框顶部：1px实心35759a；
}
*html#页脚{高度：20px；}
#页脚p{
颜色：#fff；
字号：1em；
保证金：2px0；
}
形式{
保证金：0；
填充：0；
}
挑选{
字体系列：Arial，无衬线；
字号：1em；
颜色：#000000；
保证金：0；
填充：0；
垂直对齐：顶部；
字号：1em；
}
输入{
字体系列：Arial，无衬线；
字号：1em；
颜色：#000000；
保证金：0；
填充：0；
垂直对齐：顶部；
字号：1em；
}
人力资源
{
宽度：100%；
颜色：#000000；
高度：1px；
}
<!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>
overflow:hidden;
zoom:1; /*for IE*/