Question

我目前的布局如下：https://gyazo.com/5ed712dcea7d207b511220e3c73185da

我把A，B和C放在同一个div中并给它们相同的类名，然后用这个做了一个.css文件：

.classname{
    display: inline-block;
    width: 32%;
    vertical-align: top;
}

但我想将D添加到B的底部，所以布局如下所示： https://gyazo.com/4e8cb4cfd3f4011d359bc1e25b717ff1

有办法吗？

谢谢！

Answer 1

Flexbox可以解决这个问题。你可以做的一种方法是这样做，看看下面的代码。但如果你不想这样，那么你可能希望看看砖石布局。

＆＃13;

SELECT *
FROM yourtable
ORDER BY CASE s_type WHEN 'PENDING' THEN 1
                     WHEN 'ACTIVE' THEN 2
                     WHEN 'UPDATE' THEN 3 END, id

＆＃13;

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.elem-left, .elem-right {
   width: 200px;
   border: 1px solid #000;
}
.elem-left{
  border-right: 0;
}
.elem-right{
  border-left: 0;
}
.elem {
    border: 1px solid #000;
    position: relative;
}
.flex-column {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.flex-column>.elem:first-of-type{
  border-bottom: 0;
}
.elem p {
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
}

＆＃13;

Answer 2

我只是将div B和div D与另一个div组合在一起以使它保持在一起。这就是我向你展示如何处理这种布局的方式。但更好的方法是使用css的flex属性。其他知道弹性好的人可以帮助使用flex。

＆＃13;

* {
	box-sizing: border-box;
}
.classname {
	display: inline-block;	
	vertical-align: top;
	border: 1px solid red;
}
.layout {
	height: 100px;
	float: left;width: 31%;
	margin: 5px;
}

＆＃13;

<div class="classname layout">a</div>
<div class="layout">
	<div class="classname" style="width: 100%;height: 70px;">b</div>
	<div class="classname" style="width: 100%;height: 20px;margin-top: 10px;">d</div>
</div>
<div class="classname layout">c</div>

＆＃13;

CSS布局 - 三列，中间列包含两个框

2 个答案: