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

为div使用display: inline-block

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

Answer 2

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

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

Answer 3

你可以很容易地做到这一点

编写此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>