当前位置: 代码迷 >> HTML/CSS >> 请教如何设置一组总宽超过页面宽度的div不换行,但每个div中的文字可换行?
  详细解决方案

请教如何设置一组总宽超过页面宽度的div不换行,但每个div中的文字可换行?

热度:296   发布时间:2012-02-09 18:22:27.0
请问怎么设置一组总宽超过页面宽度的div不换行,但每个div中的文字可换行?急
<style>
.bb{background-Color:white}
    .cc{background-Color:red}

</style>
<div   style= "overflow:scroll;width:200px;height:100px; ">

<div   class= "bb "   style= "height:100px;width:50px;display:inline;word-break:break-all; "> bbbsssssssssssss </div>
<div   class= "cc "   style= "height:100px;width:50px;display:inline "> ccc </div>
<div   class= "bb "   style= "height:100px;width:50px;display:inline "> bbbb </div>
<div   class= "cc "   style= "height:100px;width:50px;display:inline "> ccc </div>
<div   class= "bb "   style= "height:100px;width:50px;display:inline "> bbbb </div>
<div   class= "cc "   style= "height:100px;width:50px;display:inline "> ccc </div>
<div   class= "bb "   style= "height:100px;width:50px;display:inline "> bbbb </div>
<div   class= "cc "   style= "height:100px;width:50px;display:inline "> ccc </div>
<div   class= "bb "   style= "height:100px;width:50px;display:inline "> bbbb </div>
<div   class= "cc "   style= "height:100px;width:50px;display:inline "> ccc </div>
   
</div>

------解决方案--------------------
你想要什么效果直接说吧,我对100分问题很感兴趣,把要求说清楚点。

我看标题,就头晕了,用最简单的话表达你要实现的效果。

还有,测试的时候最好不要全都用字母或数字

在没空格的情况下,一串的字母和数字是被认为一个单词,是不会换行的
------解决方案--------------------
首先纠正你写法上的一个错误:
比如你的那一组div,你通过将dispaly将它们转化为inline之后,就不能再为它们指定width和height了,这是block才有的。
  相关解决方案