带有内联块的CSS站点布局

我试着用内联块而不是浮点数为我的站点创建一个新的布局

<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>

---

不幸的是，我无法理解为什么删除面板之间的空白内联块以及主块与我的标题块不对齐不被视为黑客行为。你能给我一些关于如何正确布局的建议吗？感谢

要删除块之间的空格，您可以尝试这样编写html：

<div>
...
</div><div>
...
</div>

...
...

---

让元素紧跟在另一个元素之后启动将阻止浏览器在元素之间添加空格。这也意味着元素之间不能有换行符。如果我是你，我可以考虑使用缩小器来删除不必要的空白。

问题在于你的html标记。您放置了其他/额外的结尾

，这就是为什么主块没有像头块一样对齐

要删除空白，您需要执行以下操作

<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 -->

//内容
//内容
标题左侧面板


标题右侧面板

左主面板


右主面板

---

请看下面的

能否详细说明对齐问题？感谢您的解决方案，但我已经了解到，在父级中设置字体大小：0应该会得到相同的结果。（），虽然在我的情况下它确实不起作用。你能告诉我为什么吗？

<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 -->