CSS div 布局修复

Question

我的 div 布局有问题，我正在练习我的 CSS 技能来制作布局，但我遇到了一个一致的问题。因为我觉得有点难以解释，所以我会提供带有代码的图像。

代码

<div class="section-small pattern-triangles drop-shadow">
    <div class="container">
        <div class="col-lg-3 grey-text">
            <div class="footer-title">
                <h3>Contact Us</h3>
            </div>
            <div class="footer-body">
                <ul class="footer-li">
                    <li>England, Leicester</li>
                    <li>ikdevelopment@hotmail.com</li>
                    <li>07940033706</li>
                </ul>
            </div>
        </div>
        <div class="col-lg-3 grey-text red-border">
            <div class="footer-title red-border" style="position: static">
                <h3>More</h3>
            </div>
            <div class="footer-body red-border">
                <ul class="footer-li">
                    <li>Blog</li>
                </ul>
            </div>
        </div>
    </div>
</div>

代码由两个“Col-lg-3”类组成（这不是引导程序，只是使用了它们的命名约定），我遇到的问题是，如果列中的列表没有相同数量的项目高度有问题，如下所示。

我确定其他人已经遇到了这个问题，下面是所有附属的 css 代码。

.footer-li {
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    margin-bottom: 5px;
}

.footer-li li{
    margin-bottom: 10px;
 }

.col-lg-3{
    color: black;
    width: 33%;
    padding: 10px;
    display: inline-block;
}

Answer 1

您需要将两个容器元素都向左浮动。您可以添加以下代码来解决您的问题：

.grey-text{ float:left; }

Answer 2

使用float:left 代替display:inline-block：

.col-lg-3{
    color: black;
    width: 33%;
    padding: 10px;
    float:left;
}