如何显示动态宽度的空DIV？

Question

如何根据其他人的内容显示空DIV或SPAN以进行增长或缩小？

这就是我现在所拥有的：

＆＃13;

＆＃13;

.text{
	float:left;
	display:inline-block;
}
.borda{
	display:inline-block;
	background-image: url('borda.png');
	background-repeat:repeat-x;
	background-position:center bottom;
	float:left;
	margin:30px 0 0 5px;
	empty-cells: show;"
}
.numbers{
	float:right;
	display:inline-block;
}

＆＃13;

<div>
<span class="text">Text Text Text</span><span class"borda"></span><span class="numbers">Numbers</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用CSS3 flexbox规范。只需允许.borda容器增长，即flex-grow: 1。我更改了背景颜色以显示对比度。您的标记存在一些错误，包括=的类分配缺少.borda。

＆＃13;

＆＃13;

div {
  display: flex;
}
.text {
  background-color: #eee;
}
.borda {
  background-color: #333;
  flex-grow: 1;
}
.numbers {
  background-color: #eee;
}

＆＃13;

<div>
  <span class="text">Text Text Text</span><span class="borda"></span><span class="numbers">Numbers</span>
</div>

＆＃13;

＆＃13;

＆＃13;