Html 如何在列和行中正确拆分div

我需要以以下方式创建一个

div

结构：

这就是我所做的：

正文{
背景色：#e9e9e9；
}
p{
保证金：0
}
#全部{
背景：黑色；
}
#左{
浮动：左；
填充物：5px；
背景：蓝色；
宽度：200px；
}
#剩菜{
不透明度：0.8；
背景颜色：粉红色；
宽度：100%；
身高：50%；
填充物：5px；
}
#左撇子{
不透明度：0.8；
背景色：靛蓝；
宽度：100%；
身高：50%；
填充物：5px；
}
#居中{
显示：内联块；
填充物：5px；
背景：红色；
宽度：620px；
}
#中心站{
不透明度：0.8；
背景颜色：橙色；
宽度：100%；
}
#中心向下{
不透明度：0.8；
背景颜色：黄色；
宽度：620px；
高度：620px；
}
#对{
浮动：对；
填充物：5px；
背景：绿色；
}
#纠正{
不透明度：0.8；
背景色：#9ACD32；
宽度：100%；
身高：50%；
}
#彻头彻尾{
不透明度：0.8；
背景色：#00FF00；
宽度：100%；
身高：50%；
}

拆毁房子


大都市


搏击俱乐部


2014西克洛普艺术节


长吻道晚安


约会之夜


比佛利山的贫民窟
嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子

嗨，我是centerUp

嗨，我是centerDown

嗨，我很好

嗨，我很好

您可以使用

flexbox

请注意，我稍微调整了您的代码，例如，删除了CSS中的

float:left

，删除了不推荐的

width

/

height

HTML标记，删除了重复的属性，加入了一条规则

*，
*：：之前，
*：：之后{
框大小：边框框
}
身体{
背景色：#e9e9e9；
}
p{
保证金：0
}
#全部{
背景：黑色；
显示器：flex
}
#左{
填充物：5px；
背景：蓝色；
弹性：1
}
#左撇子，
#左撇子{
不透明度：0.8；
宽度：100%；
身高：50%；
填充物：5px；
}
#剩菜{
背景颜色：粉红色；
}
#左撇子{
背景色：靛蓝；
}
#居中{
显示：内联块；
填充物：5px；
背景：红色；
宽度：620px；
}
#中心站{
不透明度：0.8；
背景颜色：橙色；
宽度：100%；
}
#中心向下{
不透明度：0.8；
背景颜色：黄色；
高度：计算（100%-20px）
}
#对{
填充物：5px；
背景：绿色；
弹性：1
}
#对了,，
#彻头彻尾{
不透明度：0.8；
宽度：100%；
身高：50%；
}
#纠正{
背景色：#9ACD32；
}
#彻头彻尾{
背景色：#00FF00；
}

拆毁房子


大都市


搏击俱乐部


2014西克洛普艺术节


长吻道晚安


约会之夜


比佛利山的贫民窟
嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子

嗨，我是centerUp

嗨，我是centerDown

嗨，我很好

嗨，我很好

您可以叠瓦柔性箱：

正文{
背景色：#e9e9e9；
}
p{
保证金：0
}
#全部{
背景：黑色；
显示器：flex；
保证金：自动；
最大宽度：1200px；
最小高度：80vh；
/*演示用于显示元素拉伸行为*/
}
#左{
显示器：flex；
柔性流动：柱；
填充物：5px；
背景：蓝色；
宽度：200px；
}
#剩菜{
不透明度：0.8；
背景颜色：粉红色；
弹性：1；
填充物：5px；
}
#左撇子{
不透明度：0.8；
背景色：靛蓝；
弹性：1；
;
填充物：5px；
}
#居中{
弹性：1；
显示器：flex；
柔性流动：柱；
填充物：5px；
背景：红色；
}
#中心站{
背景颜色：橙色；
}
#中心向下{
不透明度：0.8；
背景颜色：黄色；
弹性：1；
}
#对{
显示器：flex；
柔性流动：柱；
填充物：5px；
背景：绿色；
宽度：200px；
}
#纠正{
不透明度：0.8；
背景色：#9ACD32；
弹性：1；
}
#彻头彻尾{
不透明度：0.8；
背景色：#00FF00；
弹性：1；
}

拆毁房子


大都市


搏击俱乐部


2014西克洛普艺术节


长吻道晚安


约会之夜


比佛利山的贫民窟
嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子，嗨，我是左撇子

嗨，我是centerUp

嗨，我是centerDown

嗨，我很好

嗨，我很好

两个原因让您无法了解您对样本的期望

首先，在将面板居中之前，应调用所有浮动面板

然后，如果中心面板的大小大于页面大小，它将返回到该行

对于中心面板，仅通过以下方式更改css类：

#center {
        display: inline-block;
        padding: 5px;
        background: red;
        width: 30%;
        position:absolute;
        }

我建议你用百分比操纵你的面板。

---

我在样本中添加了30%，但只是让您选择您想要的一个。

如果您不关心内容层次结构：

正文{
背景色：#e9e9e9；
}
p{
保证金：0
}
#全部{
背景：黑色；
}
#左{
浮动：左；
填充物：5px；
背景：蓝色；
宽度：200px；
}
#剩菜{
框大小：边框框；
不透明度：0.8；
背景颜色：粉红色；
宽度：100%；
身高：50%；
填充物：5px；
}
#l