Question

我试图创建一个如下图所示的布局，但我唯一得到的就是我所有盒子的一行。我真的希望保持这种布局无表情，所以经过几个小时的困惑和研究，我在这里打开我的问题。

由于我无法发布图片，这就是我试图用CSS框做的事情。

    |  |[ ] [ ]
    |  |[ ] [ ]

描述：左边有一个大盒子，是两个小盒子的高度。和四个小盒子相邻。

这是最大的CSS代码：

.box {
    width:28%;
    background:#f2f5f6;
    border: 1px solid #c3d1d6;
    font-family: Lato,sans-serif;
    padding: 1.1em;
    margin: 0.5em 0.5em 0.5em 0;
    display: inline-block;
}

非常感谢你的帮助！

Answer 1

有几种方法可以实现这一目标。其中一个最简单的就是花车。

Have a fiddle!

HTML

<div id="wrap">
    <div class="left"></div>
    <div class="box"></div>
    <div class="box color"></div>
    <div class="box color"></div>
    <div class="box"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
#wrap {
    height: 100%;
    width: 300px;
    margin: 0 auto;
}
.left {
    float: left;
    height: 100%;
    width: 33%;
    background: #F00;
}
.box {
    height: 50%;
    background: #FF0;
    width: 33%;
    float: left;
}
.color { background: #000; }

Answer 2

您可以使用display: table。

您可以将所有这些单元格包装到容器中，并将容器设置为display: table，然后将display: table-cell应用于您希望以此方式运行的所有内部元素。

这是实际表的更好替代方法，因为它允许您使用CSS设置样式。我在响应式设计中多次使用此方法，以保持侧边栏与内容的高度相同。

请注意，这会略微改变margin和padding的行为，因此您可能需要稍微改变一下。

CSS - 盒子定位

2 个答案: