Question

我的div不是正确的高度（见下图），它应该更高但它停在div的中间（带有不同图标的部分在同一个div中）。我不知道为什么你能这样帮助我？

这是我的HTML：

    <div class="features">
    <div class="row">
        <hgroup>
            <h2>Features</h2>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
        </hgroup>
        <ul>
            <li>
                <i class="ion-social-wordpress"></i>
                <h4>Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat enim et nisi volutpat vulputate. Aliquam dictum libero id viverra volutpat. Nullam justo nisl, suscipit id neque facilisis, scelerisque placerat erat.</p>
            </li>
            <li>
                <i class="ion-iphone"></i>
                <h4>Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat enim et nisi volutpat vulputate. Aliquam dictum libero id viverra volutpat. Nullam justo nisl, suscipit id neque facilisis, scelerisque placerat erat.</p>
            </li>
            <li>
                <i class="ion-person"></i>
                <h4>Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat enim et nisi volutpat vulputate. Aliquam dictum libero id viverra volutpat. Nullam justo nisl, suscipit id neque facilisis, scelerisque placerat erat.</p>
            </li>
            <li>
                <i class="ion-cash"></i>
                <h4>Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat enim et nisi volutpat vulputate. Aliquam dictum libero id viverra volutpat. Nullam justo nisl, suscipit id neque facilisis, scelerisque placerat erat.</p>
            </li>

        </ul>
    </div>
</div>

这是我的CSS（它在scss中）：

    $basecolor: #5aadf0;
$hover: #3b9eed;
$time: 0.3s;
/* ------------------------------------------- */
/* Basic setup  */
/* ------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #fff;
    color: #555;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility; 
}

/* ------------------------------------------- */
/* Reusable */
/* ------------------------------------------- */

.row {
    width: 1140px;
    margin: 0 auto;
}

    /* ------------------------------------------- */
    /* Headers */
    /* ------------------------------------------- */
    h2 {
        text-align: center;
        text-transform: uppercase;
        font-size: 200%;
        word-spacing: 8px;
        letter-spacing: 2px;
    }

    h2:after {
        display: block;
        height: 2px;
        background-color: $basecolor;
        content: " ";
        margin: 0 auto;
        margin-top: 15px;
    }

    h3 {
        font-size: 110%;
        text-align: center;
        text-transform: uppercase;
        padding: 25px 0;
    }

    h4 {
        font-size: 100%;
        text-align: center;
        text-transform: uppercase;
        padding: 10px 0;
    }

    h4:after {
        display: block;
        height: 2px;
        background-color: $basecolor;
        content: " ";
        margin: 0 auto;
        margin-top: 8px;
    }

    /* ------------------------------------------- */
    /* Text */
    /* ------------------------------------------- */
    .info-text {
        font-size: 100%;
    }

    /* ------------------------------------------- */
    /* Buttons */
    /* ------------------------------------------- */

    .btn {
        padding: 10px 15px;
        text-transform: uppercase;
        border-radius: 300px;
        text-decoration: none;
    }

    .full-btn:link,
    .full-btn:visited {
        border: 1px solid $basecolor;
        color: white;
        background-color: $basecolor;
        transition: background-color $time, border-color $time;
    }

    .full-btn:hover,
    .full-btn:active {
        background-color: $hover;
        border-color: $hover;
    }

    .ghost-btn:link,
    .ghost-btn:visited {
        border: 1px solid $basecolor;
        color: $basecolor;
        transition: border-color $time, color $time, border-color $time;
    }

    .ghost-btn:hover,
    .ghost-btn:active {
        border-color: $hover;
        color: $hover;
        background-color: $hover;
        color: #fff;
    }

/* ------------------------------------------- */
/* Header */
/* ------------------------------------------- */
header {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/hero.jpg);
    background-size: cover;
    background-position: center;

    .hero-text-box {
        position: absolute;
        width: 1140px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .hero-btn {
            width: 100%;
            margin-top: 30px;

            .full-btn {
                margin-right: 10px;
            }
        }

        h1 {
            color: #fff;
            font-size: 280%;
            font-weight: 300;
            text-transform: uppercase;
            word-spacing: 4px;
            letter-spacing: 1px;
        }
    }
}

/* ------------------------------------------- */
/* Navigation bar */
/* ------------------------------------------- */
nav {
    position: fixed;
    z-index: 9999;
    width: 100%;

    .logo {
            height: 100px;
            width: auto;
            float: left;
            margin: 20px 0;
    }

    .main-nav {
        float: right;
        list-style: none;
        margin-top: 55px;

        li {
            display: inline-block;
            margin-left: 40px;

            a:link, a:visited {
                color: #fff;
                text-decoration: none;
                text-transform: uppercase;
                font-size: 100%;
                border: 2px solid transparent;
                transition: border-bottom $time; 
                padding: 8px;
            }

            a:hover, a:active {
                border-bottom: 2px solid $basecolor;
                border-radius: 3px;
            }
        }   
    }
}

/* ------------------------------------------- */
/* Info Section */
/* ------------------------------------------- */
.info {
    padding: 50px 0;
    width: 100%;

    hgroup {
        h2:after {
            width: 35%;
        }
    }
}

/* ------------------------------------------- */
/* Features section */
/* ------------------------------------------- */
.features {
    padding: 50px 0;
    width: 100%;

    hgroup {
        h2:after {
            width: 25%;
        }
    }

    ul {
        width: 100%;

        li {
            display: inline-block;
            float: left;
            width: 25%;
            padding: 20px;

            i {
                font-size: 400%;
                text-align: center;
                color: $basecolor;
                display: inline-block;
                width: 100%;
            }

            h4:after {
                width: 100%;
            }

            p {
                font-size: 100%;
            }
        }
    }
}

/* ------------------------------------------- */
/* About section */
/* ------------------------------------------- */
.about {
    padding: 50px 0;
    width: 100%;

    hgroup {
        h2:after {
            width: 20%;
        }
    }
}

编辑：

我希望div包含div中的所有元素，包括现在没有执行的无序列表。

Answer 1

您将<li>元素放在.features div中，但是您没有清除浮点数。

ul:after {
    content: '';
    display: table;
    clear: both;
}

Here is a Codepen demonstrating your issue.

Here is a Codepen demonstrating the solution.

Div没有合适的高度

1 个答案: