多个DIV自动横向排列如何自动撑开父级DIV并出现横向滚动条? 父级div就固定了宽,当内容多时自动出滚动条

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多个DIV自动横向排列如何自动撑开父级DIV并出现横向滚动条? 父级div就固定了宽,当内容多时自动出滚动条相关的知识,希望对你有一定的参考价值。

teamLeft是父级div,怎么能当里面商品列表多时,它自动出滚动条,我现在是在内层套了一个div style="2000px",但我不想要这样的效果,向京东那样,商品少时比如4个时就不出现,8个时就出现了

#teamLeftwidth:595px; height:205px; overflow-x:auto; overflow-y:hidden;
#teamLeft .glistwidth:127px; float:left; margin:5px 10px 0; display:inline;
#teamLeft .glist .gimgwidth:122px; height:121px; padding:4px 0 0 5px; background:url(images/index_bg3.png) no-repeat;
#teamLeft .glist .gpricemargin-top:3px;

<div id="teamLeft" class="f_l">
<div style="width:2000px;">
<!-- foreach from=$package_goods.goods_list item=goods_list -->
<div class="glist">
<div class="gimg"><a href="goods.php?id=$goods_list.goods_id"><img src="$goods_list.goods_thumb" width="118" height="117" /></a></div>
<div class="gname"><a href="goods.php?id=$goods_list.goods_id">$goods_list.goods_name</a></div>
<div class="gprice">¥<span>$goods_list.shop_price</span> / <em>$goods_list.market_price</em></div>
</div>
<!--/foreach-->
</div>
</div>

把这一句 style="width:2000px;"去掉,当它所在的div里面的内容增多的时候,就自然有横向滚动条了。
可以多复制几个class=“glist”的整个div试试看。
例如:
<div id="teamLeft" class="f_l">
<div class="glist">
<div class="gimg"><a href="goods.php?id=$goods_list.goods_id"><img src="$goods_list.goods_thumb" width="118" height="117" /></a></div>
<div class="gname"><a href="goods.php?id=$goods_list.goods_id">$goods_list.goods_name</a></div>
<div class="gprice">¥<span>$goods_list.shop_price</span> / <em>$goods_list.market_price</em></div>
</div>
<div class="glist">
<div class="gimg"><a href="goods.php?id=$goods_list.goods_id"><img src="$goods_list.goods_thumb" width="118" height="117" /></a></div>
<div class="gname"><a href="goods.php?id=$goods_list.goods_id">$goods_list.goods_name</a></div>
<div class="gprice">¥<span>$goods_list.shop_price</span> / <em>$goods_list.market_price</em></div>
</div>
<div class="glist">
<div class="gimg"><a href="goods.php?id=$goods_list.goods_id"><img src="$goods_list.goods_thumb" width="118" height="117" /></a></div>
<div class="gname"><a href="goods.php?id=$goods_list.goods_id">$goods_list.goods_name</a></div>
<div class="gprice">¥<span>$goods_list.shop_price</span> / <em>$goods_list.market_price</em></div>
</div>
<div class="glist">
<div class="gimg"><a href="goods.php?id=$goods_list.goods_id"><img src="$goods_list.goods_thumb" width="118" height="117" /></a></div>
<div class="gname"><a href="goods.php?id=$goods_list.goods_id">$goods_list.goods_name</a></div>
<div class="gprice">¥<span>$goods_list.shop_price</span> / <em>$goods_list.market_price</em></div>
</div>
</div>追问

复制了,但是它就自已撑下去了,变成垂直的了

参考技术A 通过CSS可以实现,但我的这个只是IE兼容,时间有限,楼主自己做下FF等浏览器的兼容吧

要点:clear:right;

这个样式IE和FF的存在不同的解释,所以FF不兼容

------------------------------CSS样式部分------------------------------
<style type="text/css">
#teamLeft
width:595px;
height: 300px;
overflow-X:auto;
overflow-Y:hidden;

#teamLeft .glistbox
float: left;
height: 200px;

#teamLeft .glist
width:127px;
height: 200px;
background-color: #FF0000;
margin-right:10px;
padding: 0px;
clear: right;
float:left;

</style>

------------------------------html部分------------------------------

<div id="teamLeft" class="f_l">
<div class="glistbox">
<div class="glist"></div>
<div class="glist"></div>
<div class="glist"></div>
<div class="glist"></div>
<div class="glist"></div>
<div class="glist"></div>
<div class="glist"></div>
<div class="glist"></div>
</div>
</div>
参考技术B 那就只能用js判断里面有多少个商品,然后给容器动态设置宽度,比如4个的时候是500px,那自然就没有横向滚动条,8个的时候假如是1000~~自动就有了。本回答被提问者和网友采纳 参考技术C FF F12

子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

方法一:

html:

<div id="all1">

<div id="left1">1</div>

<div id="left2">1</div>

<div style=" clear:both; "></div>

</div>

css:

#left1{ float:left;width:200px;}

#left2{ float:left;width:200px;}

#all1{}

这个方法的关键在于用了clear:both来清除了浮动元素,把父元素all1撑开。

方法二:

html:

<div class="aa">
  <div class="bb">sffsssssssssssss</div>
  <div class="cc">sffss</div>
</div>

css:

.aa{ border:1px solid #000; background:#CC4;overflow:hidden;}
.bb { border:1px solid #f00; background:#999; float:left;}
.cc{ border:1px solid #f00; background:#999; float:left;}

此方法的重点在于,子元素有float之后,父元素需要设置一个overflow:hidden;,这样就可以自动撑开父元素aa。

 

特别注释:

 

overflow:hidden要有宽度或者高度才会溢出部分隐藏,如果外部盒子没有宽度或者高度,里面又是浮动元素,就会被撑开

 

总结如上的方法,各有适合的地方。比如overflow:hidden之后,超出父元素位置的子元素就看不到了,可以试一下如下的两段代码对比一下,

代码一:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css" >
.aa{ border:1px solid #000; background:#CC4;overflow:hidden;}
.bb { border:1px solid #f00; background:#999; float:left; margin-top:-10px;margin-left:110px;}
.cc{ border:1px solid #f00; background:#999; float:left;}
</style>
<body>
<div class="aa">
  <div class="bb">图片</div>
  <div class="cc">图片</div>
</div>
</body>
</html>

 

效果图:

代码二:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css" >
.aa{ border:1px solid #000; background:#CC4;}
.bb { border:1px solid #f00; background:#999; float:left; margin-top:-10px;margin-left:110px;}
.cc{ border:1px solid #f00; background:#999; float:left;}
</style>
<body>
<div class="aa">
  <div class="bb">图片</div>
  <div class="cc">图片</div>
<div style="clear:both"></div>
</div>
</body>
</html>

效果图:

 

以上是关于多个DIV自动横向排列如何自动撑开父级DIV并出现横向滚动条? 父级div就固定了宽,当内容多时自动出滚动条的主要内容,如果未能解决你的问题,请参考以下文章

怎样让一个div里的多个div横向排列

DIV+CSS样式,li自动适应高度,自动换行,横向排列

如何让div中的内容横向排列

div盒子存在阴影导致父级标签出现滚动条

如何使ul中li元素横向排列且不换行

子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题