带有内联 block 的 CSS 站点布局

Question

我尝试使用内联 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 不对齐。你能给我一些关于如何做出正确布局的建议吗？谢谢

Answer 1

问题出在您的 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