html - 带有内联 block 的 div 上的文本溢出

Question

我在一个包含一些文本内容的 div 中有一个内联 block 。如果显示设置为内联，文本内容会溢出...

http://jsfiddle.net/76d9twoy/

HTML 和 CSS

<div id="leftdiv">
</div>
<div id="rightdiv">
       <div id="nametag">Simba Animated Plush Battery Operated Sitting Talking Tom, Multi Color (9-inch)<div>
       <div id="pricetag">10.00$<div>
       <div id="quantitytag">10<div>
</div>



#leftdiv{
    float:left;
    width:100px;
    height:100px;
    background-color:blue

}

#rightdiv{
    float:left;
    width:400px;
    height:100px;
    background-color:yellow
}
#nametag{
    width:200px;
    display:inline;

}

问题:如何将名称标签内容换行？

Answer 1

但问题是什么？如果你想要它 inline-block 你可以这样做来修复它:
CSS:

#nametag{
width:200px;
display:inline-block; //set to inline-block
}

#rightdiv{
float:left;
width:400px;
height:auto; //set to auto
background-color:yellow
}

比在这个 Jquery 代码到页面设置 leftdiv 高度与 rightdiv 相同

J查询:

$('#leftdiv').css( 'height', $('#rightdiv').height());

比你得到这个结果http://jsfiddle.net/76d9twoy/1/