调整和定位容器内的div

Question

我有以下标记：

<div class="container">
    <div class="left-rect"></div>
    <div class="text">Lorem ispum</div>
    <div class="right-rect"></div>
</div>

.left-rect,
.right-rect { 
    background-color: #EEE;
    width: 9px;
}
.container {
    background-color: #555;
    height: 20px;
}

我希望它看起来像：

而且，重要的是：.rect的宽度必须依赖于.text宽度，它会自动调整到其内容的大小。
因此，如果我将更长的文本放入.text中，.rect应该更宽，并且左右两侧仍然在边缘。 .rect div可以放在任何地方（通过js） 而且我完全不知道该怎么做 我希望你能理解我的写作。

Answer 1

将display:inline-block用于div

<强> CSS

.left-rect,
.right-rect { 
    background-color: white;
    width: 9px; 
    display:inline-block
}
.container {
    background-color: #555;
    height: 20px;
    padding:4px;
     display:inline-block;
    color:white
}
.text{
    display:inline-block
}
​

<强> DEMO

您可以尝试添加长文本，它会根据文本长度进行扩展。

Answer 2

您可以轻松完成此操作

写这个css

.left-rect{
float:left;
  margin-left:16px;
}
.right-rect{
float:right;
  margin-right:16px;
}
.left-rect,
.right-rect { 
    background-color: #EEE;
    width: 9px;
  height:16px;
  margin-top:2px;
}
.container {
    background-color: red;
    height: 20px;
 }

撰写此HTML

<div class="container">
    <div class="left-rect"></div>

    <div class="right-rect"></div>
   <div class="text">Lorem ispum</div>
</div>

的 Live demo 的

Answer 3

将display: inline-block用于div

<强> CSS ：

.rect { 
    background-color: #EEE;
    width: 9px;
    height: 13px;
}

.container {
    background-color: #555;
    width: 165px;
    padding: 2px 5px;
    height: 20px;
    line-height: 20px;
    display: block;
}

.rect, .text {
    display: inline-block;
}

.text {
    color: #EEE;
    margin: 0 30px;
}

<强> LIVE DEMO