0

我有以下内容：https ://codepen.io/truetaurus/pen/KejbPE

<div class="container">
    <div class="one">
      ONE this is the content
      <br/>
      ONE this is the content
      <br/>
      ONE this is the content
      <br/>
      ONE this is the content
      <br/>
    </div>
    <div class="two">
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
    </div>
  <div class="three">
    THREE this is the content
    <br/>
    THREE this is the content
    <br/>
    THREE this is the content
    <br/>
    THREE this is the content
    <br/>
  </div>
</div>

我想要一个 2 列布局，右列采用所需的任何高度，左侧的内容在我的 codepen 中看到的 2 个元素中分隔。

我希望绿色元素位于红色元素的正下方，而不是它从蓝色元素高度末端开始的位置并且不改变结构。在不更改布局和不使用 CSS 网格的情况下如何实现这一点？

4

3 回答 3

1

如果为容器定义了高度限制，则可以使用具有以下设置（wrap等order）的 flexbox：

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 700px;
  height: 300px;
  margin: auto;
}
.one {
  order: 1;
  background-color: red;
  width: 500px;
}
.two {
  order: 3;
  background-color: blue;
  width: 200px;
}
.three {
  order: 2;
  background-color: green;
  width: 500px;
}
<div class="container">
    <div class="one">
      ONE this is the content
      <br/>
      ONE this is the content
      <br/>
      ONE this is the content
      <br/>
      ONE this is the content
      <br/>
    </div>
    <div class="two">
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
      TWO this is the content
      <br/>
    </div>
  <div class="three">
    THREE this is the content
    <br/>
    THREE this is the content
    <br/>
    THREE this is the content
    <br/>
    THREE this is the content
    <br/>
  </div>
</div>

（切换到全屏显示以查看正确显示的结果）

于 2018-07-06T15:04:05.730 回答
1

在其他容器上也使用浮动。

.container {
  width: 700px;
  margin: auto;
}
.one {
  background-color: red;
  display: inline;
  float: left;
  width: 500px;
}
.two {
  background-color: blue;
  display: inline-block;
  float:right;
  width: 200px;
}
.three {
  background-color: green;
  float:left;
  width: 500px;
}
于 2018-07-06T15:00:52.900 回答
0

您可以使用 CSS 网格： 

  .container {
   width: 700px;
   display : grid;
   margin: auto;
   grid-template-columns: auto auto;
   grid-template-rows: auto auto ; 
   }
   .one {
   background-color: red;
   float: left;
   width: 500px;
    grid-row : 1/2;
   }
  .two {
    background-color: blue;
    width: 200px;
    grid-row: 1/3;
   float: right; 
   }
   .three {
    background-color: green;
    width: 500px;
    }
于 2018-07-06T15:44:52.447 回答