html - 调整和定位容器内的 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-blockdiv

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
}
​

演示

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

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>

现场演示

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;
}

现场演示