Html 使用CSS自动宽度的问题

外部

outer

的宽度为

200px+16px

，内部

outer

的宽度为

200px

使用

minwidth

<div class="outer">
  <div class="outer">
  </div>
</div>

---

这将导致

外部

与

内部

一起增长，但不低于

200px

使用

最小宽度

<div class="outer">
  <div class="outer">
  </div>
</div>

---

这将导致

外部

与

内部

一起增长，但不会低于

200px

我对ValyreanGroup关于如何使他/她的答案符合您的目的的答案发表了评论。基本上，您只需添加

display:inline块

，以防止

外部

div占用100%的宽度。下面是一个演示：

.outer{
填充：8px；
最小宽度：200px；
显示：内联块；
}	
/*这些是演示用的*/
.外部{
背景色：红色；
}
.outer>.outer{
背景颜色：紫色；
}
.outer>.outer>.outer{
背景颜色：蓝色；
}

测试
测试测试

我对ValyreanGroup关于如何让他/她的答案符合您的目的的答案发表了评论。基本上，您只需添加

display:inline块

，以防止

外部

div占用100%的宽度。下面是一个演示：

.outer{
填充：8px；
最小宽度：200px；
显示：内联块；
}	
/*这些是演示用的*/
.外部{
背景色：红色；
}
.outer>.outer{
背景颜色：紫色；
}
.outer>.outer>.outer{
背景颜色：蓝色；
}

测试
测试测试

您有三个div，它们的ID都是

ID=“outer”

-这是非法的；在HTML文档中，ID必须是唯一的，您的CSS将无法按预期工作。如果您有几个这样的类，它们应该使用一个类而不是id:

@StephenP我忘了将其更改为

class

。我又编辑了一遍。为什么任意的

-16px

？这是从哪里来的？这应该是

外部的填充吗？仅供参考：边距不是宽度的一部分，而填充是宽度的一部分。@KodosJohnson填充了
8px
…我的道歉。您有三个div，都是ID
ID=“outer”
-这是非法的；ID必须在HTML文档中是唯一的，CSS将无法按需要工作。如果您有几个这样的类，它们应该使用一个类而不是id:
@StephenP我忘了将其更改为
class
。我又编辑了一遍。为什么任意的
-16px
？这是从哪里来的？这应该是
外部的填充吗？仅供参考：边距不是宽度的一部分，而填充是宽度的一部分。@KodosJohnson填充了
8px
…我的道歉。我编辑了我的问题，因为我没有明确说明我的要求。在您的答案中，
#outer
的宽度与其外部元素相同。（如果外部元素大于
200px
，则其宽度将大于
200px
）@zhuscat您可以通过将id选择器更改为class selects（
#outer
->
.outer
）使此答案生效并添加以下内容：
.outer{padding:8px；最小宽度：200px；display:inline block；}
。秘密是
内联块
，它不占100%的宽度。我编辑了我的问题，因为我没有明确说明我的要求。在您的答案中，
#outer
的宽度与其外部元素相同。（如果外部元素大于
200px
，则其宽度将大于
200px
）@zhuscat您可以通过将id选择器更改为class selects（
#outer
->
.outer
）使此答案生效并添加以下内容：
.outer{padding:8px；最小宽度：200px；display:inline block；}
。秘密是
内联块
，它不占用100%的宽度。
#outer{
     min-width:200px;
 }
#inner{
     width: auto;
}