我有一个父div下有两个div,父div有100%的宽度:
<div id="parent"> <div class="left"></div> <div class="right"></div> </div>
条件是:
>我想在同一行上的两个div。
>右边的div可能存在也可能不存在。当它存在,我希望它总是固定在右边。但是,左div必须是弹性的 – 它的宽度取决于其内容。
我试过两个float:left,和dispaly:inline-block但是两个解决方案似乎都不工作。
任何建议将不胜感激。
解决方法
我会去与@ sandeep的显示:table-cell的答案,如果你不关心IE7。
否则,这里有一个替代方案,有一个缺点:“正确的”div必须先在HTML中。
参见:http://jsfiddle.net/thirtydot/qLTMf/
和完全一样,但是与“右div”删除:http://jsfiddle.net/thirtydot/qLTMf/1/
#parent { overflow: hidden; border: 1px solid red } .right { float: right; width: 100px; height: 100px; background: #888; } .left { overflow: hidden; height: 100px; background: #ccc } <div id="parent"> <div class="right">right</div> <div class="left">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam semper porta sem,at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus,nec ullamcorper augue varius eget.</div> </div>