html - 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><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4adafa0a1b2a1a8abb4a9a1aab084acabb0a9a5ada8eaa7aba9" rel="noreferrer noopener nofollow">[email protected]</a></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”类组成(这不是 Bootstrap ，我只是使用了它们的命名约定)，我遇到的问题是，如果列中的列表没有相同数量的元素存在如下高度问题。

我确信其他人也遇到过这个问题，下面是所有相关的 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; }