怎么让多个div不换行并出现横向滚动条
日期：2014-05-17 浏览次数：21019 次
如何让多个div不换行并出现横向滚动条
类似下面这样的结构，要求第二层的div不换行，最外层出现横向滚动条
------解决方案--------------------
类似下面这样的结构，要求第二层的div不换行，最外层出现横向滚动条
- HTML code
<div style="width:200px; height:100px;">
<div style="width:50px; height:100px;">
<div>fdsaf</div>
<div>dfffd</div>
</div>
<div style="width:50px; height:100px;">
<div>fdsaf</div>
<div>dfffd</div>
</div>
<div style="width:50px; height:100px;">
<div>fdsaf</div>
<div>dfffd</div>
</div>
<div style="width:50px; height:100px;">
<div>fdsaf</div>
<div>dfffd</div>
</div>
<div style="width:50px; height:100px;">
<div>fdsaf</div>
<div>dfffd</div>
</div>
</div>
------解决方案--------------------
- HTML code
<div style="width:200px; height:100px; overflow-x:scroll; white-space:nowrap">
<div style="width:50px; height:100px; display:inline">
<div>fdsaf</div>
<div>dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline">
<div>fdsaf</div>
<div>dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline">
<div>fdsaf</div>
<div>dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline">
<div>fdsaf</div>
<div>dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline">
<div>fdsaf</div>
<div>dfffd</div>
</div>
</div>
------解决方案--------------------
<div style="width:250px; height:100px; overflow-x:scroll; white-space:nowrap">
<div style="width:50px; height:100px; display:inline;float:left;">
<div style="width:20px;float:left;">fdsaf</div>
<div style="width:20px;float:left;">dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline;float:left;">
<div style="width:20px;float:left;">fdsaf</div>
<div style="width:20px;float:left;">dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline;float:left;">
<div style="width:20px;float:left;">fdsaf</div>
<div style="width:20px;float:left;">dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline;float:left;">
<div style="width:20px;float:left;">fdsaf</div>
<div style="width:20px;float:left;">dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline;float:left;">
<div style="width:20px;float:left;">fdsaf</div>
<div style="width:20px;float:left;">dfffd</div>
</div>
</div>
------解决方案--------------------
只加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 不行，不过对<a>写
style="dispaly:inline-block"就可以了你是一下，在IE下行，火狐下没测试
<!DOCTYPE html PUBLIC "-//W3C//D
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
