<分区>
我有一个问题,我没有找到任何简单的解决方案。
仅使用 HTML 和 CSS,
有没有一种很好的方法可以使父级 div
与其包含的元素的总大小“匹配”?
请注意,box
元素都具有相同的固定强制大小。但是这个大小可能会有所不同,所以我不想使用 @media
查询。
这是一个注释片段来说明我的意思:
#page{
width: 500px;
}
.container {
display: inline-block;
border: 1px solid black;
background: #ddd;
height: auto;
}
.box {
width: 200px;
height: 30px;
background: #fff;
line-height: 30px;
text-align: center;
border: 1px solid gray;
float: left;
}
#con1{
width: 404px;
}
<div id="page">
<p>How is it possible to have the container sized to fit its children?</p>
<div class="container">
<div class="box">x</div>
<div class="box">x</div>
<div class="box">x</div>
</div>
<br><br>
<p>Here is what I want, but without setting width in the CSS!</p>
<div class="container" id="con1">
<div class="box">x</div>
<div class="box">x</div>
<div class="box">x</div>
</div>
</div>
做这个片段,在我看来我还有一个小问题......
为什么我的代码段中的框之间有一些空间?
提前感谢您提供任何有用的答案。