使用CSS自动宽度的问题

Question

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

我想使用CSS调整outer元素的宽度。

以下是要求：

1. outer的填充为8px
2. 如果inner小于200px - 16px，则outer为200px
3. 如果inner大于或等于200px - 16px，则outer的宽度为inner's width + 16px
4. outer可能有outer个子项，内部outer元素的要求相同。

例如：

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

外部outer的宽度为200px + 16px，内部outer的宽度为200px

Answer 1

使用min-width

#outer{
     min-width:200px;
 }
#inner{
     width: auto;
}

这会导致outer与inner一起增长但不会低于200px

Answer 2

我评论了TheValyreanGroup关于如何使他/她的答案适合您的目的的回答。基本上你只需要添加display:inline-block以防止outer div占用100％的宽度。这是一个演示：

＆＃13;

＆＃13;

.outer {
	padding:8px;
	min-width:200px;
	display:inline-block;
}	

/* These are for demonstration */
.outer {
	background-color:red;
}
.outer > .outer {
	background-color:purple;
}
.outer > .outer > .outer {
	background-color:blue;
}

＆＃13;

<div class="outer">
	<div class="inner" contenteditable="true">test</div>
	<div class="outer">
		<div class="outer" contenteditable="true">test test test test test</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我添加背景颜色只是为了演示。我添加了contenteditable="true"，因此您可以直接编辑文本以观察其行为。