我把它放在一起,许多不同的来源。亚历克斯科尔斯的解决方案离蝙蝠最近,但中间并没有居中。它比我的烂摊子还要干净得多。我开始与代码this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
我把亚历克斯清理的元素就是让我更接近我的目标,但该中心色块是太宽。从this question我了解到“最大宽度”,最终成为我需要的最后一部分......所以我想。
编辑:最大宽度不能在IE7怪癖模式下工作(我必须支持)所以从this page我学会了如何调整我的CSS以在IE7 quirks模式,IE8和FF中工作。
最后的代码(fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
感谢所有伟大的答案 - 我从这个问题中学到了很多。
Paul
Ha,山寨版! +1进行我们的更改以使其正常工作。 – 2011-06-08 18:25:43