Question

我有两个inline-block div元素。当我在第二个div内添加图片时，它会将div推到第一个div下面。

下面＆＃39;问题的直观表示

绿色条应与蓝色侧边条水平对齐。我无法理解造成这个问题的原因。

问题

导致此问题的原因是什么？我如何解决此问题，以便两个div元素完全并排排列。

这是我的代码

HTML

<html>
    <body>
        <div class="top-navbar">
            <img src="../Resources/images/admin dashboard/top-bar.png" alt="top nav bar" class="image-fill"/>
        </div><!--end of top nav bar-->

        <div class="side-bar">
            <img src="../Resources/images/admin dashboard/side-bar.png" alt="side bar" class="image-fill">
        </div><!--end of side bar-->

        <div class="content-area">
            <div id="welcome-bar-container">
                <img src="../Resources/images/admin dashboard/welcome-bar.png" alt="dasboard text" class="image-fill"/>
            </div>
        </div><!--end of content area-->
    </body>
</html>

CSS

.side-bar {
    width: 20%;
    display: inline-block;
}

.side-bar img {
    position: relative;
    top: -4px;
}

.content-area {
    display: inline-block;
    vertical-align: top;
    background: red;
    line-height: 0;
}

#dashboard-text {
    width: 70%;
}

.image-fill {
    width: 100%;
}

Answer 1

由于.content-area没有定义宽度，因此图片上的width: 100%设置只是默认为图片的宽度。 Reference

您需要在.content-area div上设置宽度，使其与第一个div一致。

.content-area {
    width: 70%;
}

（您为width: 70%元素设置了#dashboard-text，此处未使用。您是否要将其设置在.content-area元素上？）

内联块div中的图像将div向下推

1 个答案: