Html 我怎样才能拥有<；部门>；布局分割成三列，中间列中有行？

我正在尝试将

布局拆分为行。我可能可以通过一个HTML表来完成这一点，但这种设计需要流畅，以便可以在移动设备上查看。我已经考虑过制作一个响应性HTML表，但这似乎不是一个好的解决方案

因此，在图片的“我想要什么”部分，我希望第1列和第7列自动扩展到第3行到第6行的总高度。第一列和第七列将为空，第三行、第五行和第六行的文本长度不同，第四行的图像宽度为1020px，高度为1024px

第三行到第六行的总宽度应为屏幕宽度的80%，第一列和第七列的宽度应分别为屏幕宽度的10%

我使用的是Bootstrap3.3.6。下面是图片中“我得到了什么”部分及其CSS的代码

.wrapper{
宽度：100%；
身高：100%；
}
.一{
显示：内联块；
宽度：10%；
身高：100%；
背景：蓝色；
}
.二{
显示：内联块；
宽度：80%；
高度：自动；
}
.三{
宽度：80%；
高度：自动；
背景：橙色；
}
.4{
宽度：80%；
高度：自动；
背景：紫色；
}
.5{
宽度：80%；
高度：自动；
背景：黄色；
}
.6{
宽度：80%；
高度：自动；
背景：绿色；
}
.7{
显示：内联；
宽度：10%；
身高：100%；
背景：红色；
}

一个
三
四
五
六
七

您可以在此处使用

flex

或

表格

显示

： （对于flex，增加了600-720px的断点；对于table版本，增加了660px的断点）

以整页模式运行代码段以查看行为

.wrapper{
宽度：100%；
身高：100%；
}
.一{
背景：蓝色；
}
.二{
宽度：80%；
}
.三{
背景：橙色；
}
.4{
背景：紫色；
}
.5{
背景：黄色；
}
.6{
背景：绿色；
}
.7{
背景：红色；
}
/*弯曲*/
.flex{
显示器：flex；
柔性包装：包装；
}
.flex>div{flex:110%}
.flex.两个{
最小宽度：600px；
最大宽度：100%；
弹性：180%
}
/*桌子*/
.桌子{
显示：表格；
表布局：固定；
}
.表格>分区{
显示：表格单元格；
}
@介质（最大宽度：660像素）{
.table>div{显示：块；宽度：100%；
}
}

一个
三
四
五
六
七

一个
三
四
五
六
七

很长一段时间以来，我一直使用媒体查询

.container {
    margin: 10%;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
}
@media (max-width: 900px) {
    .container {
        width: calc(100% - 12px);
    }
}
.column {
    width: calc(45% - 6px);
    height: auto;
    float: left;
}
@media (max-width: 600px) {
    .column {
        width: calc(100% - 6px);
    }
}

以及HTML：

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

通过将

.column

中的

calc

公式更改为

（（100%/3）-6px）

，也可以使用

divs

（3列）执行此操作。对于每个新列，更新除数。只需注意，它们一路变小

---

归功于@Adam Buchanan Smith

---

如果您使用的是bootstrap，如果标签在问题中，并且您有bootstrap

container fluid

中的默认类，那么您只需要使用已经定义的bootstrap类

.row

/

col-*-*

并在

.row

中设置

display:flex

.row{
显示器：flex
}
.一{
背景：蓝色；
}
.三{
背景：橙色；
}
.4{
背景：紫色；
}
.5{
背景：黄色；
}
.6{
背景：绿色；
}
.7{
背景：红色；
}

一个
三
四
五
六
七

flex和table都可以工作，但是bootstrap

。row/col-*-*

更容易工作with@MichaelSwartz如果您使用的是自举，我从来不会这样做，因为如果您的设计不是“自举”设计/主题，那么它总是需要重写；）