Css 我的集装箱赢了'；不要在它的父容器中运行

我想把黑盒子放到蓝盒子里。 据我所知，黑盒子和红盒子在同一个容器里；因此，黑盒子应该在蓝盒子里

/*容器*/
主容器{
高度：40公分；
宽度：70%；
顶部：5em；
背景颜色：橙色；
}
第1节蓝盒{
高度：10公分；
宽度：100%；
背景颜色：蓝色；
}
图1.redbox{
高度：10公分；
宽度：24%；
保证金：0；
填充：0；
背景色：红色；
}
摘要：黑盒{
高度：10公分；
宽度：62%；
保证金：0；
填充：0；
背景色：黑色；
}
/*风格*/
摘要：黑匣子{
颜色：白色；
填充：0；
保证金：0；
}

身材

总结

div是块元素，因此它们自然会转到自己的行。您可以应用float:left；将红色和黑色框安装到蓝色框中。

根据当前的

元素：

figure元素表示一些流内容（可选地带有标题），这些内容是自包含的（如完整的句子），通常作为文档主流的单个单元引用

大多数浏览器，更重要的是，被广泛使用的浏览器所理解为：

figure { 
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

显示

块

将使其占据宽度的

100%

，并将每隔一个“块级项目”（如

）推到新行上。下面

有多种方法可以达到预期的效果。然而，用最少的代码来实现这一点是非常困难的

figure {float: left}

main.container{
高度：40公分；
宽度：70%；
顶部：5em；
背景颜色：橙色；
}
第1节蓝盒{
高度：10公分；
宽度：100%；
背景颜色：蓝色；
}
图1.redbox{
高度：10公分；
宽度：24%；
保证金：0；
填充：0；
背景色：红色；
}
摘要：黑盒{
高度：10公分；
宽度：62%；
保证金：0；
填充：0；
背景色：黑色；
}
/*风格*/
摘要：黑匣子{
颜色：白色；
填充：0；
保证金：0；
}
图{float:left；}

身材

总结

你应该把

float:left

添加到

部分。redbox

去掉蓝框上的高度在这个例子中没有

，本。我的错误。但是，这些仍然是块元素。是的，它可以应用于red，但是我认为“Figure”+“Summary”与单词wrap会很奇怪，只有一个元素是浮动的。谢谢你的帮助。我得出的结论是，只有父元素的第一个子元素才会进入父元素。因此，红盒子是蓝盒子的第一个孩子，所以它进去了。哦，你是想让蓝盒子在高度上延伸，而不是让红色和黑色并排吗？在这种情况下，你不应该浮动任何东西，并删除蓝色框的高度。不，你是正确的。我想把红框和黑框并排放在一起，我认为语义标签和div标签是一样的。我刚开始使用语义标签，因为据说它对搜索引擎优化有好处。确实如此。但是我认为您应该清楚地指定它们的

display

属性，以便它们按照您的喜好显示。您不必使用任何默认值。如果我的答案不能帮助你达到你想要的视觉效果，请重新表述你的问题，以便清楚你想要达到的效果，我会更新我的答案。