如何让CSS中浮动元素纵向堆叠而非横向排列？

问题描述 #

我正在制作一个双栏布局网页，一侧为主内容区，另一侧为附加内容区。但由于给附加栏元素设置了float: right，现在这些元素横向堆叠在一起，我需要让它们改为纵向排列。试过vertical-align属性，但没有效果。期望效果是右侧附加栏的两个模块上下依次排列。

当前代码 #

CSS #

.topicheader {
    padding: 2% 2%;
    float: left display: block;
    background-image: linear-gradient(to top, rgb(40, 40, 40), rgb(50, 50, 50));
    font-size: 125%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px 0px black;
}

.column.side {
    z-index: 1;
    width: 25%;
    float: right;
}

HTML #

<div>
    <div class="def column side">
        <strong class="topicheader">About</strong>
        <p style="color:white;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        </p>
    </div>

    <div class="def column side">
        <strong class="topicheader">About</strong>
        <p style="color:white;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        </p>
    </div>
</div>

解决方案 #

先修正语法错误 #

首先注意到.topicheader的CSS里有语法错误：float: left display: block缺少分号，应该改成float: left; display: block;，否则这部分样式会失效。

方法1：给父容器设置浮动（结构清晰） #

把float: right和宽度设置转移到包裹两个附加栏的父容器上，内部的附加栏元素默认是块级元素，会自动纵向排列：

修改后的CSS

.topicheader {
    padding: 2% 2%;
    float: left;
    display: block;
    background-image: linear-gradient(to top, rgb(40, 40, 40), rgb(50, 50, 50));
    font-size: 125%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px 0px black;
}

.side-container {
    float: right;
    width: 25%;
}

.column.side {
    z-index: 1;
    /* 移除这里的float: right */
}

修改后的HTML

<div class="side-container">
    <div class="def column side">
        <strong class="topicheader">About</strong>
        <p style="color:white;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        </p>
    </div>

    <div class="def column side">
        <strong class="topicheader">About</strong>
        <p style="color:white;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        </p>
    </div>
</div>

方法2：给每个附加栏添加清除浮动 #

如果不想修改HTML结构，只需给每个.column.side添加clear: right，强制每个元素清除之前的右侧浮动，从而换行：

.column.side {
    z-index: 1;
    width: 25%;
    float: right;
    clear: right; /* 添加这行 */
}

方法3：用Flexbox实现现代布局（长期推荐） #

浮动布局是较旧的实现方式，用Flexbox可以更灵活地控制排列，还能轻松添加间距：

修改后的CSS

.topicheader {
    padding: 2% 2%;
    float: left;
    display: block;
    background-image: linear-gradient(to top, rgb(40, 40, 40), rgb(50, 50, 50));
    font-size: 125%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px 0px black;
}

.side-container {
    width: 25%;
    margin-left: auto; /* 让容器自动右对齐 */
    display: flex;
    flex-direction: column; /* 设置纵向排列 */
    gap: 1rem; /* 可选，给模块之间添加间距 */
}

.column.side {
    z-index: 1;
}

HTML结构和方法1一致，用side-container包裹两个附加栏元素

为什么vertical-align没用？ #

vertical-align属性仅对行内元素、行内块元素或表格单元格生效，对浮动的块级元素不起作用，所以用这个属性无法解决当前问题。

内容的提问来源于stack exchange，提问作者TheRobot140