两个divs同一行，一个动态宽度，一个固定

小编典典

两个divs同一行，一个动态宽度，一个固定

css

我在一个父对象下有两个div div，父div的宽度为100％：

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

条件是：

我要在同一行上两个div。
右div可能存在或可能不存在。当它存在时，我希望它始终固定在右侧。但是，左div必须具有弹性-其宽度取决于其内容。

我已经尝试过float：left和dispaly：inline-block，但是似乎都没有解决方案。

任何建议，将不胜感激。

阅读 320

2020-05-16

共1个答案

小编典典

display: table-cell如果您不关心IE7，我会使用@sandeep的答案。

否则，这是一个替代方案，但有一个缺点：“正确” div必须在HTML中排在首位。

#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>

2020-05-16