html - css div水平对齐

Question

我在容器 div 中有四个 div。 4 个 div 应该水平对齐，但现在只有三个是水平对齐的。第四个 div 换行到下一行。

这是 HTML 标记:

<div class="col-xs-3">
        <div id="standards">
            <h5><strong>My Energy Standards</strong></h5>
        </div>
        <div id="years">
            <h5><strong>My Study Periods</strong></h5>
            <div id="col-1"></div>
            <div id="col-2"></div>
            <div id="col-3"></div>
            <div id="col-4"></div>
        </div>
    </div>

4 个 div 是 #col-1、2、3 和 4。

这是 CSS 标记:

    #years{
    overflow: auto;
}
#col-1, #col-2, #col-3, #col-4{
    float: left;
    padding-right: 5px;
}

用于视觉效果的图像:

年份 div 最终将与标准 div 具有相同的边框。首先，我需要弄清楚为什么它没有按照我的意愿去做。感谢您的帮助!

Answer 1

这似乎只是正在使用的 html 的一部分(通常是好的)，但在这种情况下，我认为这是指定的 html/css 链上的宽度问题，导致您的列换行.

您需要查看您的 html 和 css 以查看任何小于您正在创建的列大小的容器，并扩展其宽度以使第四列正确对齐。