网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
javascript吧 关注：269,260贴子：906,481
  • 19回复贴，共1页

怎么实现div横向排布？

一个主div(class=div_parent，width:1000px)，然后多个子div(class=div_child，width:100px;height:300px)
怎么实现子div横向排布，可以左右滚动？
设置了主div样式overflow-x: scroll; overflow-y: hidden;
设置了子div样式float:left;
可是只显示几个就不显示了，而且也不能滚动，如图，求解！


要实现的效果：

现在实际的效果：


2025-06-06 04:11:11
广告
可以用绝对定位啊


<div >最外层 overflow-x:scroll; y:hidden ; 宽度固定
<div>第二层 宽度 很长
<div>你要的子div 左浮动 ........


float的效果是放不下就换行，父级div宽度1000，子div宽度超过1000后面的子div就会换到下一行


实现滚动效果 只用css不行吧 反正我都用的js


顺便来一个纯 CSS 自卷动版，支援 IE Chrome Firefox。将滑鼠放在 div_parent 里面还会停止卷动喔。
<!DOCTYPE html><meta charset="UTF-8"/>
<style>
.div_parent { width: 1000px; border: 1px solid purple; overflow: hidden; white-space: nowrap; }
.div_child { width: 100px; height:300px; border: 1px solid green; display: inline-block; margin: 1ex; }
.div_child:first-child { animation: rollLeft linear 6s infinite; -webkit-animation: rollLeft linear 6s infinite; -moz-animation: rollLeft linear 6s infinite; }
.div_parent:hover .div_child:first-child { animation-play-state:paused; -webkit-animation-play-state:paused; -moz-animation-play-state:paused; }
@keyframes rollLeft { from { margin-left: 0; } to { margin-left: -1290px; } }
@-webkit-keyframes rollLeft { from { margin-left: 0; } to { margin-left: -1290px; } }
@-moz-keyframes rollLeft { from { margin-left: 0; } to { margin-left: -1290px; } }
</style>
<div class="div_parent">
<div class="div_child"></div><div class="div_child"></div><div class="div_child"></div><div class="div_child"></div>
<div class="div_child"></div><div class="div_child"></div><div class="div_child"></div><div class="div_child"></div>
<div class="div_child"></div><div class="div_child"></div><div class="div_child"></div><div class="div_child"></div>
<div class="div_child"></div><div class="div_child"></div><div class="div_child"></div><div class="div_child"></div>
<div class="div_child"></div><div class="div_child"></div><div class="div_child"></div><div class="div_child"></div>
</div>


把容器的宽设成所有层的总和不就好了，说话，你这是要作移动网站么？


2025-06-06 04:05:11
广告
用span


<body>
<style type="text/css">
.out_div{width: 500px;overflow-x: auto;overflow-y: hidden;background-color: #ccc;}
.in_div{width: 150px;height: 100px;float: left; margin: 5px;background-color: blue;}
</style>
<div class="out_div">
<div style="width:1000px;">
<div class="in_div"></div>
<div class="in_div"></div>
<div class="in_div"></div>
<div class="in_div"></div>
<div class="in_div"></div>
</div>
</div>
</body>
再套一层div就行了，给个固定的宽度


可以到华清远见问问哦


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 19回复贴，共1页
分享到: