我尝试使用内联 block 而不是 float 为我的网站创建新布局。
<div id="container">
<div class="row"><!-- HEADER -->
<div class="pan1">
<div class="content">
HEADER LEFT PANEL <br /><br />
</div>
</div>
<div class="pan2">
<div class="content">
HEADER RIGHT PANEL <br/></div>
</div>
</div>
</div><!-- END HEADER -->
<div class="row"><!-- MAIN -->
<div class="pan3">
<div class="content">
MAIN LEFT PANEL <br /><br />
</div>
</div>
<div class="pan4">
<div class="content">
MAIN RIGHT PANEL <br/></div>
</div>
</div>
</div><!-- END MAIN -->
</div>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #f5f6f7;
}
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #ccc;
}
.row {
margin-top: 10px;
background: #fff;
padding: 0px;
}
.pan1 {
width: 700px;
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
}
.pan2 {
width: 256px;
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
}
.pan3 {
width: 500px;
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
}
.pan4 {
width: 456px;
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
}
.content {
padding: 0px;
border: 1px solid #000;
font-size: 12px;
}
不幸的是,我不明白为什么删除面板内联 block 之间的空白不被认为是 hack 而且主 block 结果与我的标题 block 不对齐。你能给我一些关于如何做出正确布局的建议吗?谢谢
最佳答案
问题出在您的 html 标记中。你把其他/额外的结尾 </div>
这就是为什么主 block 不像标题 block 那样对齐的原因
要删除空白,您需要执行此操作
<div>
// content
</div><div>
// content
</div>
<div id="container">
<div class="row"><!-- HEADER -->
<div class="pan1">
<div class="content">
HEADER LEFT PANEL <br /><br />
</div>
</div><div class="pan2">
<div class="content">
HEADER RIGHT PANEL <br/>
</div>
</div>
</div><!-- END HEADER -->
<div class="row"><!-- MAIN -->
<div class="pan3">
<div class="content">
MAIN LEFT PANEL <br /><br />
</div>
</div><div class="pan4">
<div class="content">
MAIN RIGHT PANEL <br/>
</div>
</div>
</div><!-- END MAIN -->
</div><!-- END CONTAINER -->
看看这个 demo
关于带有内联 block 的 CSS 站点布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21510139/