Question

我想在一个固定宽度的块中将两个div放在一起。右div是可变长度（未知的一行文本）。左边的div包含图像背景（漂亮的破折号），必须填满剩余的空间。

以下是问题的说明：

|<---         400px           --->|
+---------------------------------+
|                                 |
| ----------------- Variable text |
|                                 |
+---------------------------------+

示例HTML：

<div id="parent">
  <div id="left"></div>
  <div id="right">some text</div>
</div>

注意：右边必须有透明的背景！

由于

Answer 1

请参阅： http://jsfiddle.net/thirtydot/bSMen/

<强> HTML：

<div id="parent">
    <div id="right">some text</div>
    <div id="left"></div>
</div>

是的，遗憾的是，#left和#right必须互换。

<强> CSS：

#parent {
    width: 400px;
    border: 2px dashed #666
}
#left, #right {
    height: 100px
}
#left {
    overflow: hidden;
    border: 2px solid #f0f
}
#right {
    float: right;
    border: 2px solid #0ff
}

Answer 2

嗯，最好的方法是：

<div style="width:500px">
    <div style="DASH BG"><div style="BG TO HIDE DASH">Text</div></div>
</div>

Answer 3

我会使用float：

<div style="width:400px;">
   <div style="float:left;background-image:url('bgdesert.jpg');"></div>
   <div style="float:right;">Your text here</div>
   <br style="clear:both;" />
</div>

两个div填补了可用空间

3 个答案: