-1

我想使用具有两列的 DIV 制作一个响应式表格布局，第二列被分成两个相等的行，所以它看起来像这样。

文本

谢谢你。

4

2 回答 2

1

您可以使用 CSS Flexflex: 1和flex: 2

.container {
  display: flex;
  width: 100%;
  height: 300px;
  flex-wrap: wrap;
}
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.button {
  flex: 1;
  color: white;
}

.button.rowspan {
  flex: 2;
}
<div class="container">
  <div class="column">
    <div class="button rowspan" style="background: red;">
      Column 1 - rowspan
    </div> 
  </div>
  <div class="column">
    <div class="button" style="background: green">
      Column 2
    </div>
  
    <div class="button" style="background: orange">
      Column 3
    </div>
  </div>
</div>

于 2020-04-16T09:30:35.877 回答
1

很高兴看到您自己尝试这样做。您可以使用 CSS 网格来构建响应式布局：

<html>
  <div class="grid">
    <div class="left">

    </div>
    <div class="right-up">
    </div>
    <div class= "right-down">

    </div>
  </div>
</html>

CSS：

.grid {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  grid-template-columns: 50vw 50vw;
  grid-template-rows: 50vh 50vh;
  grid-template-areas:
  "left right-up"
  "left right-down";

}

.left {
  grid-area: left;
  background-color: blue;
}
.right-up {
  grid-area: right-up;
  background-color: green;
}
.right-down{
  grid-area: right-down;
  background-color: red;
}

JSfiddle：JSfiddle 链接

于 2020-04-16T09:13:32.343 回答