在没有父容器的情况下对齐两个

Question

我试图定位两个

元素，使它们的左侧对齐，就像这张照片中的顶部导航栏和侧边栏：

通常，我会使用父

来帮助解决这个问题。问题是我计划使用 PHP include() 作为标题和侧边栏，以节省在整个网站上的复制和粘贴。这意味着

标记必须在 include() 末尾保持打开状态，以便为右侧的内容留出空间。这看起来是一种可怕的做法，我可能会忘记在页面末尾添加

。

有没有一种方法可以对齐块而不将它们包含在父容器中？

编辑：这是我到目前为止所拥有的。

<!-- Common code.  Designed to be include()'d into each page. -->
<div id = "Header">
    <a href = "/"><img id = "Logo" src = "Foo.jpg"></a>
    <!-- #Logo is centered in CSS. -->

    <ul id = "TopNav">
        <li><a href = "/">Home</a></li>
        <li><a href = "Browse">Home</a></li>
    </ul>
    <!-- #TopNav is also centered in CSS. There are also
    some fancy link effects, but those are irrelevant. -->
</div>

<div id = "Sidebar">
    <!-- Contains stuff like advertisements and a 
    table of contents. -->
</div>
<!-- No CSS effects are currently applied to the sidebar, meaning it's on the
far left of the page.  I'm trying to line it up with #TopNav, which is
closer to the center.

<!-- The content section to the right of the sidebar is not included
in this file.  That's defined on a page-by-page basis.  Whatever that
content is, it should fall to the right of the sidebar.  It'd be nice
if the left side of the content never fell past the right side of the
sidebar, though not an absolute necessity. -->

Answer 1

您仍然可以使用父容器对齐两个 div。无需担心 div 标签保持打开状态。只需像这样编写 html/php 即可：

<div id="parent">
    <?php include 'header_sidebar.php'; ?>
    <div id="content">
    </div>
</div>

Answer 2

我想你所追求的只是点击。

您可以使用 body 元素作为三个 div 的容器。

像这样： http://jsfiddle.net/4st5e/

虽然我仍然不确定为什么你可以'只需添加一个包装器 div..

Answer 3

我做了这个快速模拟： http://jsfiddle.net/LXwmF/1/

我不知道您当前是否是这样设置的，但您可以使用我的作为模板。您可以看到您可以设置每个父 div 的样式。