两个div填满可用空间

我想把两个div放在一个固定宽度的块中彼此相邻。正确的div是可变长度（未知的一行文本）。左边的div包含图像背景（漂亮的短划线），并且必须填满剩余的空间。两个div填满可用空间

这是问题的说明：

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

样本HTML：

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

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

感谢

来源

2011-09-08 jrumbinas

您需要哪种浏览器/版本支持？任何机会，只有浏览器[支持Flexbox]（http://caniuse.com/flexbox）？或者你需要IE7等浏览器的标准无聊支持吗？ – thirtydot

是的，我需要IE7的支持 – jrumbinas

参见：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 
}

来源

2011-09-08 15:20:04 thirtydot

Niiiiiiiiiiiiiiiiiiiiiiiice！非常感谢。非常简单和优雅的解决方案:)） – jrumbinas

那么，最好的办法是：

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

来源

2011-09-08 14:18:06

问题是，我不想隐藏短跑背景（网页设计包含许多渐变，它会削减和维护背景部分）。 – jrumbinas

我将使用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>

来源

2011-09-08 14:24:11 Atheist

在你的例子中左div将是0px宽度。两个div之间必须没有差距。 – jrumbinas

然后试试这个：http://jsfiddle.net/Atheist/3rQsB/ – Atheist

你还是错的。我将背景改为大纲。看看发生了什么：http://jsfiddle.net/3rQsB/1/ – jrumbinas

两个div填满可用空间

回答

相关问题