div如何使内容强制不换行,用CSS实现!

html-css022

div如何使内容强制不换行,用CSS实现!,第1张

你好，不使用浮动，使用inline-block就可以处理了：

<div style="width:100%height:50pxwhite-space:nowrapoverflow:auto">

    <div style="display: inline-blockwidth:25%">1</div>

    <div style="display: inline-blockwidth:25%">2</div>

    <div style="display: inline-blockwidth:25%">3</div>

    <div style="display: inline-blockwidth:25%">4</div>

    <div style="display: inline-blockwidth:25%">5</div>

</div>

如果要考虑IE6/7，display:inline-block的元素需加上：

*display: inline

*zoom: 1

希望是你想要的结果，望采纳~~

关于css让元素换行限制如下：

1强制不换行 div{ white-space:nowrap}

2自动换行 div{ word-wrap: break-wordword-break: normal}

3强制英文单词断行 div{ word-break:break-all}

第一步.布局：

<div class="wrap">

<div class="left"></div>

<div class="right"></div>

</div>

第二步.样式：

这里的选择就很多了，可以根据自己是用在什么平台上选择最简单的方法：

PC端：那么方法就可以是通过

1.浮动(float),

2.定位position(这个不建议拿来布局)，

3.display:inline-block(这个需要和vertical-align: top配合使用，不然会造成顶部不对其的现象)

移动端：那么就建议使用css3display:box布局(最好多加一句display:-webkit-box)，因为CSS3的布局可以做到各种适应屏幕，非常强大。并且有非常好的兼容性，不像PC端的兼容性。