如果第二个有长文本，如何让两个 div 并排答案

【问题标题】：how to keep two div side by side if the second has a long text如果第二个有长文本，如何让两个 div 并排
【发布时间】：2011-03-21 20:33:52
【问题描述】：

我有一个 div，其中有两个并排的 div。外div的宽度和内左div的宽度是固定的。我使用 display:inline-block 来并排显示两个 div，但是如果右边 div 中的文本太长，右边 div 会移动到第二行。怎样才能让右边div里的文字在div里面改变行，而不是让整个div下移呢？

<div style="width:300px"><div style="width:100px; display:inline-block; background-color:green">the first div</div><div style="display:inline-block; background-color:yellow">the second div with a long text, some more</div></div>

感谢您的帮助。

【问题讨论】：

查看本站教程：css.maxdesign.com.au/floatutorial/tutorial0816.htm
代码有错字。 background-olor 应该说background-color

标签： css html

【解决方案1】：

使用浮动，你必须给两个元素一个固定的宽度，并让它们向左浮动

<div style="width:300px">
    <div style="width:100px; float:left; background-color:green">the first div</div>
    <div style="width:200px; float:left; background-color:yellow">the second div with a long text, some more</div>
</div>

【讨论】：

【解决方案2】：

你可以给第一个<div>一个float:left; CSS属性，第二个overflow:hidden;：

<div style="width:300px"><div style="width:100px; float:left; background-color:green">the first div</div><div style="overflow:hidden; background-color:yellow">the second div with a long text, some more</div></div>

【讨论】：

【解决方案3】：

如果外部 div 和最左边的内部 div 都有预定义的宽度，那么通过减法的过程，你最右边的 div 也是如此

如果你的外div是300px，你的左div是100px，那你的右div不就是200px吗？

http://jsfiddle.net/Jaybles/FCXgp/

...我错过了什么吗？

【讨论】：

【解决方案4】：

你也可以使用 display:inline-block 代替 overflow:hidden

【讨论】：

【解决方案5】：

您必须浮动两个 div，一个向左浮动，另一个（更多文本）向右浮动，您还必须为右侧 div 提供 200 像素的宽度。这是现场演示：http://jsfiddle.net/zVRWR/2/

【讨论】：