gpt4 book ai didi

CSS Flexbox - 带有 'content wrap under' 难题的两列

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

我不得不承认在这个问题上失败了,这让我非常沮丧,就在我以为我已经理解了 flexbox 的时候!为奇怪的描述道歉,但问题比描述的更容易显示。

我需要什么:所有四个带标签的 div(标题、左、右、左下方)都必须位于一个公共(public)容器中。左列和右列各占一半空间,但无论 RIGHT 的高度如何,UNDER-LEFT 都必须塞入 LEFT 下方。

what i want

我得到的是什么: 目前,当我增加 RIGHT 的高度时,它正在将 UNDER-LEFT 向下推:(

enter image description here

到目前为止我的代码

<style>
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 580px;
background-color: rgb(240, 240, 240);
}
#heading {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#left {
background-color: red;
height: 250px;
flex: 0 0 50%;
}
#right {
background-color: lightblue;
flex: 0 0 50%;
}
#under-left {
background-color: lightgreen;
flex: 0 0 50%;
}
</style>

<body>
<div id="container">

<div id="heading">
<p>title</p>
</div>

<div id="left">
<p>LEFT height 250, basis 50%</p>
</div>

<div id="right">
<p>RIGHT, basis 50%</p>
</div>

<div id="under-left">
<p>UNDER-LEFT</p>
</div>

</div>
</body>

我尝试过的:老实说,我完全不知所措。我尝试过 float 元素,但当然 flex 会忽略 float 元素。我不知道还能尝试什么,这不是懒惰,因为我花了大约 25 分钟来创建这篇文章。我已经在 SO 上搜索了其他答案(例如 CSS Flex Box Layout: full-width row and columns ),但没有一个具有 wrap-under 元素问题。

请善待!

最佳答案

像这样使用 flexbox(需要标记更改)

#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 580px;
background-color: rgb(240, 240, 240);
}
#heading {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#left {
flex: 1;
}
#right {
background-color: lightblue;
flex: 1;
padding: 20px;
}
#left-top {
background-color: red;
padding: 20px;
}
#left-bottom {
background-color: lightgreen;
padding: 20px;
}
<div id="container">

<div id="heading">
<p>title</p>
</div>

<div id="left">
<div id="left-top">
LEFT height 250, basis 50%
</div>

<div id="left-bottom">
UNDER-LEFT
</div>
</div>

<div id="right">
RIGHT, basis 50%
</div>

</div>


更新基于无法包裹左侧 div 的评论

请注意,这对于 flexbox 和未包装的 div 可能是可行的,但我需要知道布局应该是什么样子。

这是一个 float 版本,它可以在较小的屏幕上使用 flexbox,使用 @media 查询以可视方式重新排列元素。

要使 under-left 始终位于 left 下方,而不管 right 的高度如何,您需要使它们比right(这里是1px),左边的 float left,右边的 float right

样本,

#container {
width: 580px;
background-color: rgb(240, 240, 240);
}
#heading {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#left {
background-color: red;
height: 150px;
float: left;
width: calc(50% + 1px);
}
#right {
background-color: lightblue;
height: 100px;
float: right;
width: calc(50% - 1px);
}
#under-left {
background-color: lightgreen;
float: left;
width: calc(50% + 1px);
}
<div id="container">

<div id="heading">
<p>title</p>
</div>

<div id="right">
<p>RIGHT, basis 50%</p>
</div>

<div id="left">
<p>LEFT height 250, basis 50%</p>
</div>

<div id="under-left">
<p>UNDER-LEFT</p>
</div>

</div>

样本,更高

#container {
width: 580px;
background-color: rgb(240, 240, 240);
}
#heading {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#left {
background-color: red;
height: 150px;
float: left;
width: calc(50% + 1px);
}
#right {
background-color: lightblue;
height: 250px;
float: right;
width: calc(50% - 1px);
}
#under-left {
background-color: lightgreen;
float: left;
width: calc(50% + 1px);
}
<div id="container">

<div id="heading">
<p>title</p>
</div>

<div id="right">
<p>RIGHT, basis 50%</p>
</div>

<div id="left">
<p>LEFT height 250, basis 50%</p>
</div>

<div id="under-left">
<p>UNDER-LEFT</p>
</div>

</div>


根据另一条评论更新 2

这是一个结合了 flexbox@media 查询的 float 版本,这将使它们在较小的屏幕上以正确的顺序/大小显示

#container {
width: 580px;
background-color: rgb(240, 240, 240);
}
#heading {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#left {
background-color: red;
height: 150px;
float: left;
width: calc(50% + 1px);
}
#right {
background-color: lightblue;
height: 200px;
float: right;
width: calc(50% - 1px);
}
#under-left {
background-color: lightgreen;
float: left;
width: calc(50% + 1px);
}

@media screen and (max-width: 600px) {
#container {
display: flex;
flex-direction: column;
}
#left,
#under-left,
#right {
float: none;
width: auto;
}
#right {
order: 1;
}
}
<div id="container">

<div id="heading">
<p>title</p>
</div>

<div id="right">
<p>RIGHT, basis 50%</p>
</div>

<div id="left">
<p>LEFT height 250, basis 50%</p>
</div>

<div id="under-left">
<p>UNDER-LEFT</p>
</div>

</div>

关于CSS Flexbox - 带有 'content wrap under' 难题的两列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38455550/

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