水平划分并排和堆叠

时间：2017-02-01 16:34:32

标签： html css

我试图有4个div：前两个是25％宽度和50％高度，一个是另一个高于它。其他div分别为25％宽度和100％高度，然后分别为50％宽度和100％高度。我无法弄清楚如何将它们排列在一起，因为它们会相互撞击。

＆＃13;
＆＃13; 
div {
  background: green;
  border: 1px solid white;
}

.box3{
  display: inline-block;
  width: 50%;
  height:360px;
  border: 1px solid rgba(255,255,255,0.3); 
  box-sizing: border-box;

}

.box2{
  display: inline-block;
  width: 25%;
  height:360px;
  border: 1px solid rgba(255,255,255,0.3);
  box-sizing: border-box;

}

.box{
  width: 25%;
  height:180px; 
  border: 1px solid rgba(255,255,255,0.3);
  box-sizing: border-box;

}
＆＃13; 
<div class="box"></div>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
＆＃13;
＆＃13;
＆＃13;

这是一张显示我想要的图像。 enter image description here

这非常适合使用，当我把元素放在div中时，它们也漂浮在页面上并且不会粘在实际的div中，所以我愿意完全替代的解决方案或框架，可以使这更容易。

1 个答案:

答案 0 :(得分：2)

Flexbox使这样的事情变得非常简单： Codepen： http://codepen.io/SergiOca/pen/zNWrKP

<强> HTML 

<body>
  <div class="full-wrap">
<div class="first-wrap">
<div class="box"></div>

<div class="box"></div>
</div>

<div class="box2"></div>

<div class="box3"></div>
  </div>
</body>

<强> CSS 

.full-wrap{
  display: flex;
}
.first-wrap{
  display: flex;
  flex-direction: column;
  flex: 1;
}


.box3{
  flex: 2;
  height:360px;
  border: 1px solid black; 
}

.box2{
  flex: 1;
  height:360px;
  border: 1px solid black; 
}


.box{
  height:180px; 
  border: 1px solid black;
}
相关问题
最新问题