Question

我有一个问题，我没有找到任何简单的解决方案。

仅使用HTML和CSS，
是否有一种很好的方式让父母div适应＆＃34;匹配＆＃34;其所含元素的总大小？
请注意，box元素都具有相同的固定强制大小。但是此大小可能会有所不同，因此我不想使用@media个查询。

这是一个注释摘录，用于说明我的意思：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

做这个片段，在我看来，我还有另外一个小问题...... 为什么我的代码段中的框之间有一些空格？

提前感谢任何有用的答案。

Answer 1

像这样使用Media Query：

.container {
    border: 1px solid black;
    background: #ddd;
   display: inline-block;
}

@media screen and (max-width: 631px) {
   .container {
       width: 409px;
   }
}

@media screen and (max-width: 421px) {
   .container {
       width: 202px;
   }
}

.box {
    width: 200px;
    height: 30px;
    display: inline-block;
    background: #fff;
    line-height: 30px;
    text-align: center;
    border: 1px solid gray;
}

<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>

注意：调整浏览器大小并查看结果！

适合其孩子的父母div

1 个答案: