Question

我想创建以下响应式网格结构，请记住元素3和5并不总是存在且它们具有可变高度。：

我尝试使用浮动元素，但元素2进入第二列： https://jsfiddle.net/a2tbbs2b/2/

CSS：

.panel{
  background: white;
  box-sizing: border-box;
  overflow: auto;
}

.panel::after {
  content: "";
  clear: both;
  display: table;
}

.section{
  width: 60%;
  float: right;
  text-align: center;
}

.section.left{
  float: left;
  width: 40%;
}

.one{
  background: green;
  height: 80px;
}

.two{
  background: blue;
  height: 70px;
}

.three{
  background: red;
  height: 20px;
}

.four{
  background: brown;
  height: 20px;
}

.five{
  background: yellow;
  height: 50px;
}

HTML：

<div class="panel">
  <div class="section three">3</div>
  <div class="section left one">1</div>
  <div class="section four">4</div>
  <div class="section left two">2</div>
  <div class="section five">5</div>
</div>

我尝试不复制HTML来创建此布局。

欢迎任何帮助。谢谢你的时间！

Answer 1

＆＃13;

#main {
    width: 98vw;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}
#main div{ margin:5px;}
.flex-1{flex:1;}
.flex-2{flex:2;}
.flex-3{flex:3;}

＆＃13;

<div id="main">
  <div class='flex-2' style="background-color:coral;">RED</div>
  <div class='flex-3' style="background-color:lightblue;">BLUE</div>  
  <div class='flex-1'></div>
  <div class='flex-1' style="background-color:lightgreen;">Green div with more content.
</div>

＆＃13;

您可以在其特定容器中添加内容。我无法理解您的编号方案，但您也可以同样添加内容。 Read More

响应两列网格成一个交替的行

1 个答案: