gpt4 book ai didi

html - 如何使用 flex 创建两个高度不相等的并排列?

转载 作者:行者123 更新时间:2023-11-28 05:13:29 28 4
gpt4 key购买 nike

<分区>

正如您在此代码笔中所见 https://codepen.io/anon/pen/yELMrv ,红色列的高度与蓝色列相同,尽管内容较少。我希望红色列的高度由其中的内容决定。

.column-layout{
display: flex;
}
.one{
background-color: blue;
flex: 3;
}
.two{
background-color: red;
flex: 1;
}
<div class='column-layout'>
<div class='one'>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<div class='two'>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
</div>

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com