Question

我有一个div，宽度为100％。我希望在它内部再放置3个div，其高度与父亲的身高相同。

但由于一些未知问题，我无法将它放在一起。

即使我已经display:block，它仍然以display:inline-block流动。

我在这里做错了什么？

Answer 1

使用display:flex并对div.col-12或#aboutUsForm的所有孩子使用相同的左右边距。以下是此

的工作示例

#aboutUsForm {
    background-color: yellow;
    height: 50px;
    display: flex;
}

.col-12 div {
    margin:0 10%;
    width:15%
}

#col1 {
    background-color: black;
}

#col2 {
    background-color: green;
}

#col3 {
    background-color: blue;
}

<body>
    <div class="container-fluid">

        <div class="row">

            <div class="col-12 " id="aboutUsForm">
                <div id="col1"></div>
                <div id="col2"></div>
                <div id="col3"></div>
            </div>

        </div>

    </div>

</body>

Answer 2

它正在作为显示器流动：即使通过我给出了显示块：内联块。

你可以做几件事。将每个元素浮动到同一行，向左移动或添加display:inline-block;。

注意到您已将display:inline-block;提供给父元素而不是子元素。这就是为什么它不适合你。

左浮： https://jsfiddle.net/25brcg9x/1/

显示内联块： https://jsfiddle.net/beekvang/25brcg9x/2/

Answer 3

将display:inline-block添加到子div或浮动它们。目前，它们是块级元素，因此它们将进入下一行。

Answer 4

#aboutUsForm的子节点也需要显示：inline-block。我认为你错误地认为孩子会从父母那里继承这个，但这不是它的工作方式。

你的#aboutUsForm也不需要是内联块，除非它是一个主列，它的子节点将成为子列。

Answer 5

您可以在CSS中创建此选择器：

.parent > * {
    display: inline-block;
 }

'*'表示所有元素

即使在使用内联块后，子div也会低于对方

5 个答案: