css - 简单的 CSS 布局 - 我怎样才能实现这种布局，并使其易于扩展？

Question

嘿伙计们，我怎样才能实现这个简单的布局？我希望答案能帮助我理解 css 布局和 float 的基础知识。

    <div id="verticalElement1">
        <div id="horizontalElement1">
            some content
        </div>
        <div id="horizontalElement2">
            some content
        </div>
    <div>
    <div id="verticalElement2">
        <div id="verticalElement3">
            some content
        </div>
        <div id="verticalElement4">
            some content
        </div>
    <div>

好的，所以，正如“id”所暗示的那样，我希望垂直元素彼此顶部放置一个。

在顶部元素内，我希望 2 个水平元素彼此相邻。

我想在不对任何元素应用“内联”的情况下实现这一目标。

此外，我不想使用绝对定位，除非它相对于某个元素，并且缩放得很好。

我想用非常简洁和可扩展的 CSS 来实现这一切，这样我就可以添加和删除元素，而无需更改样式值。一切都应该通过将适当的类应用于某些元素来完成，就像这样:

    <div id="verticalElement1" class="containsHorizontalElements">
        <div id="horizontalElement1" class="isHorizontal">
            some content
        </div>
        <div id="horizontalElement2" class="isHorizontal">
            some content
        </div>
    <div>
    <div id="verticalElement2">
        <div id="verticalElement3">
            some content
        </div>
        <div id="verticalElement4">
            some content
        </div>
    <div>

我试过应用 float 但一切都变得疯狂......帮助!

干杯

Answer 1

您的垂直容器应该简单地显示为 block ，这是默认情况下的 div 标签。它们的内容可以是都向左浮动，也可以是一左一右。您可能还想在水平元素上设置宽度，以确保它们实际上都在同一行上。

您的 html 可以如下所示:

<div id="container1" class="container">
    <div class="inner-element"></div>
    <div class="inner-element"></div>
</div>
<div id="container2" class="container">
    <div class="inner-element"></div>
    <div class="inner-element"></div>
</div>

css 可以是这样的:

.inner-element {
    float: left;
    width: 100px;
}

此外，您必须记得清除所有包含 float 的容器:

.container {min-height: 10px;}

.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

当然，您可能希望将 div 命名为语义上更正确的名称，例如“内容”或“包装器”或类似的名称，这些名称实际上描述了它们的用途，而不是它们在页面上的外观，即名称“内容”而不是“左栏”