Question

是否有一种纯CSS方式来创建一个匹配另一个div宽度的div？没有父div。

.green-div-1 {
    background-color: #00ba00;
    width: 500px;
    height: 20px;
}

.blue-div-1 {
    background-color: #8888FF;
    max-width: 90%;
    float: left;
}

.green-div-2 {
    background-color: #00ba00;
    width: 500px;
    height: 20px;
}

.blue-div-2 {
    background-color: #8888FF;
    max-width: 90%;
    float: left;
}

<div class="green-div-1">
    <div class="blue-div-1">
        <label>long text long text long text long text long text long text </label>
    </div>
</div>
<br/>
<div class="green-div-2">
    <div class="blue-div-2">
        <label>short text</label>
    </div>
</div>

示例：https://jsfiddle.net/6kgjnL15/

Answer 1

实际上不需要float: left;，因为它们都在单独的div中

尝试从

中删除float: left

.blue-div-1{
  background-color:#8888FF; max-width:90%;
}

.blue-div-2{
  background-color:#8888FF; max-width:90%;
}

这是链接：https://jsfiddle.net/s8ufxu1m/2/

这也有助于理解更多CSS Box模型：https://css-tricks.com/the-css-box-model/

Answer 2

不确定这是否正是您所寻找的。但是将max-width更改为just width然后将其设置为100％会使两个蓝色div相同。

  .blue-div-1{
  background-color:#8888FF; width:100%; float:left;
}  

.blue-div-2{
  background-color:#8888FF; width:100%; float:left;
}

Answer 3

使用伪元素，您可以获得所需的结果。你可以在下面找到代码。但是，我强烈建议您使用JavaScript解决问题，因为您可以获得更加稳定和灵活的解决方案。

如果背景颜色不重要，请尝试以下操作：

.green-div-1{
  background-color:#00ba00; width:500px;height:20px;
}
.blue-div-1{
  max-width:90%; float:left;
}

.green-div-2{
  background-color:#00ba00; width:500px;height:20px;
}
.blue-div-1::after {
  content:"short text";
  display: block;
  height: 20px;
  margin-top: 20px;
}

<div class="green-div-1">
				<div class="blue-div-1">
					<label>long text long text long text long text long text long text </label>
				</div>
</div>
  	<br/>
<div class="green-div-2">
</div>

否则，您可以添加另一个元素来覆盖其间的空格：

.green-div-1{
  background-color:#00ba00; width:500px;height:20px;
}
.blue-div-1{
  background-color:#8888FF; max-width:90%; float:left;
}

.green-div-2{
  background-color:#00ba00; width:500px;height:20px;
}
.blue-div-1::after {
  content:"short text";
  display: block;
  background-color:#8888FF;
  height: 20px;
  margin-top: 20px;
}

#space {
  height: 20px;
  background-color: white;
  position: relative;
  top: -40px;
}

<div class="green-div-1">
				<div class="blue-div-1">
					<label>long text long text long text long text long text long text </label>
				</div>
</div>
  	<br/>
<div class="green-div-2">
</div>
<div id="space">

</div>

使用纯css使div具有相同的宽度

3 个答案: