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

Question

我正在尝试定位两个 <div>元素，以便它们的左侧对齐，就像这张照片中的顶部导航栏和侧边栏:

通常，我会使用父级 <div>帮助解决这个问题。问题是我计划使用 PHP include()用于页眉和侧边栏，以保存跨站点的复制和粘贴。这意味着 <div>标记必须在 include() 末尾保持打开状态, 为右边的内容留出空间。这似乎是可怕的做法，我可能会忘记添加 </div>在页面末尾。

有没有办法在不将 block 封装在父容器中的情况下对齐 block ？

编辑:这是我目前所拥有的。

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