Question

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

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

#teamLeft{width:595px; height:205px; overflow-x:auto; overflow-y:hidden;}
#teamLeft .glist{width:127px; float:left; margin:5px 10px 0; display:inline;}
#teamLeft .glist .gimg{width:122px; height:121px; padding:4px 0 0 5px; background:url(images/index_bg3.png) no-repeat;}
#teamLeft .glist .gprice{margin-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>

Answer 1

把这一句 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>

追问

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

Answer 2

通过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>

Answer 3

那就只能用js判断里面有多少个商品，然后给容器动态设置宽度，比如4个的时候是500px，那自然就没有横向滚动条，8个的时候假如是1000~~自动就有了。

Answer 4

FF F12