Question

非常沮丧的是，我不得不承认失败，只是当我以为我有flexbox grokked！对于奇怪的描述表示道歉，但问题更容易显示出来。

我需要什么： 所有四个标记的div（标题，左，右，左下）都必须位于一个公共容器中。左右两个cols占据了每个空间的一半，但是无论RIGHT的高度如何，UNDER-LEFT都必须低于LEFT。

我得到了什么：目前，当我增加RIGHT的高度时，它正在向下推动它：（

我的代码到目前为止

<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>

我尝试了什么： 说实话，我完全失去了。我尝试过浮动元素，但当然flex忽略浮动。我不知道还有什么可以尝试，这不是懒惰，因为我花了大约25分钟创建这篇文章。我在SO上搜索了其他答案（例如CSS Flex Box Layout: full-width row and columns），但没有任何一个以包裹元素问题为特色。

请善待！

Answer 1

这样做是为了使用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，但我需要知道该布局应该如何。

这是一个浮动版本，可以使用flexbox查询在较小的屏幕上使用@media来直观地重新排序元素。

要使under-left始终保持在left之下而不考虑right的高度，您需要使它们比right（此处为1px）更宽，让左边的一个浮动left，右浮动right

示例，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>

示例，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: 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查询的浮动版本，可以在较小的屏幕上以正确的顺序/大小显示它们

#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 - 两个包含'内容包装'难题的列

1 个答案: