两个div是同一行，一个动态宽度，一个固定 [英] two divs the same line, one dynamic width, one fixed

问题描述

我有两个div在一个父 c> div 下，父div有100％的宽度：

I have two divs under one parent div, the parent div has 100% width:

<div id="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

条件是：

• 我想在同一行上有两个div。


• 右侧div可能存在也可能不存在。当它存在，我希望它总是固定在右边。然而，左div必须是弹性的 - 它的宽度取决于其内容。

我尝试了float：left和dispaly：inline-block，但是这两个解决方案似乎都无效。

I have tried both float:left, and dispaly:inline-block but neither solution seems to work.

任何建议都会感激。

推荐答案

我会使用@ sandeep的<$ c

I'd go with @sandeep's display: table-cell answer if you don't care about IE7.

否则，这是一个替代方案，有一个缺点：$ c> display：table-cell

Otherwise, here's an alternative, with one downside: the "right" div has to come first in the HTML.

查看： http://jsfiddle.net/thirtydot/qLTMf/

和完全一样，但使用right divremoved： 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>

这篇关于两个div是同一行，一个动态宽度，一个固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！