0

次のマークアップがあります。

<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 によって) どこにでも配置できます。
そして、私はそれを行う方法がまったくわかりません。
私が書いたことを理解していただければ幸いです。

4

3 に答える 3

1

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

ライブデモ

于 2012-11-23T09:34:15.133 に答える
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
}
​

デモ

長いテキストを追加してみると、テキストの長さに基づいて拡張されます。

于 2012-11-23T09:27:21.867 に答える