我尝试将两个div一个在另一个下面,在另一个div中居中。但这是我得到的最好结果,以一种响应方式。result I got
.content {
display: flex;
align-items: center;
justify-content: center;
margin-left: 5px;
background-color: lightgray;
height: 100%;
width: 80%;
border-radius: 25px;
}
.cliente_info,
.cliente_table {
display: inline-block;
}
.cliente_info {
width: 90%;
height: 45%;
background-color: azure;
}
.cliente_table {
width: 90%;
height: 45%;
background-color: rgb(156, 204, 204);
}
<div class="content">
<div class="cliente_info">
</div>
<div class="cliente_table">
</div>
</div>
我想让div看起来像下面的图像。Result expected
4条答案
按热度按时间k97glaaz1#
尝试将
flex-flow: column
添加到.content
类,并将inline-block
元素更改为block
roqulrg32#
除了将
flex-direction: column
添加到.content
类之外,还可以添加justify-content: space-around
以在每个关联元素之前、之间和之后获得空格。如果不希望这样做,可以将顶部和底部填充应用于.content
类。gdrx4gfi3#
ncecgwcz4#
这里有很多注解:
注1:
默认情况下,
flex
元素有一个行的flex-direction
,所以要使他的子元素站在一个列中,将flex-direction
设置为列注2:
例如,如果您希望使用
flex
或grid
控制某些元素及其父元素,请尽量避免将display
用于子元素,因为在大多数情况下,它将被忽略,对齐方式将来自父设置。因此,从子节点中删除
display: inline-block
。注3:
我们将
parent
和children
的所有维度设置为百分比,这意味着父元素的祖父必须有宽度和高度,在本例中为body
,以便父元素知道他取了什么值。或者只设置宽度和高度而不设置百分比。
编辑后的代码:
请注意以下几行:css中的
1-3
和7
,以及缺少的子项显示样式。我想现在很清楚了,如果有什么东西不见了,就告诉我。