两个div相同的线,一个动态宽度,一个固定

Question

我在一个父母下有两个div div,父div有100%的宽度:

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

条件是:

• 我想在同一行上有两个div.
• 正确的div可能存在也可能不存在.当它存在时,我希望它始终固定在右边.但是,左边的div必须是弹性的 - 它的宽度取决于它的内容.

我试过float:left和dispaly:inline-block但是两个解决方案似乎都没有用.

任何建议将不胜感激.

Answer 1

display: table-cell如果你不关心IE7,我会选择@ sandeep的答案.

否则,这是一个替代方案,有一个缺点:"右" 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>

Answer 2

@Yijie; 检查链接可能是你想要的http://jsfiddle.net/sandeep/NCkL4/7/

编辑:

http://jsfiddle.net/sandeep/NCkL4/8/

或者看下面的SNIPPET

#parent{
    overflow:hidden;
    background:yellow;
    position:relative;
    display:table;
}
.left{
    display:table-cell;
}
.right{
    background:red;
    width:50px;
    height:100%;
    display:table-cell;
}
body{
    margin:0;
    padding:0;
}

<div id="parent">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="right">fixed</div>
</div>