如何保持两个div并排，如果第二个有长文本

我有一个div并排有两个div。外部div的宽度和内部左边div的宽度是固定的。我使用display：inline-block并排显示两个div，但如果右侧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>

感谢您的帮助。

来源

2011-03-21 CSSNewbie

查看本网站的教程：http://css.maxdesign.com.au/floatutorial/tutorial0816.htm – Ashley 2011-03-21 20:36:21

代码有错字。 'background-olor'应该说'background-color' – Dutchie432 2011-03-21 20:42:49

使用浮动，你必须给该元件的两个固定的宽度和浮动他们离开海誓山盟

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

来源

2011-03-21 20:38:40 ChrisR

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

如果你的外部div是300px，你的左边div是100px，那么你的右边div是不是200px？

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

...我这么想吗？

来源

2011-03-21 20:40:47 Dutchie432

-1

你必须浮动两个div，一个向左，另一个（更多文本）向右，并且还必须给右边的div 200px宽度。继承人是现场演示：http://jsfiddle.net/zVRWR/2/

来源

2011-03-21 20:46:24 EmCo

更新：我发布了错误的链接。：S – EmCo 2011-03-21 20:50:25

你可以给第一<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>

来源

2011-03-21 20:50:28

您也可以使用display：inline-block的，而不是溢出：隐藏

来源

2013-01-01 14:04:30 Uri

如何保持两个div并排，如果第二个有长文本

回答

相关问题