我正在寻找一种方法来允许一列中包含两行,而其右边的其他两列与这两行的高度相等/灵活。查看所有三列时,宽度应为100%(因此,每列约33%)。这是我希望它看起来的示例:
https://i.imgur.com/lLPzXhS.png
我将用如下所示的可点击框填充这些框:
https://i.imgur.com/uyyDbL7.png
我试过使用display:row,display:cell,但是我无法为其添加任何边距,所以这是我得到的产品:
https://i.imgur.com/Ok6EgT0.png
您可以看到我已经建立了一些网格系统,但是并不理想。即使我能够为绿松石和蓝色框添加边距,也不能在红色和橙色框之间设置边距。
这是我的代码:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
关于如何巧妙地复制第二张图像的任何想法?
最佳答案
您可以使用flexbox
。看一下这个简化的例子:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
您还可以使用基于最小基于flexbox的网格库,例如Flexbox Grid。