笔迹
笔迹
  • 发布:2015-06-13 16:31
  • 更新:2015-07-02 22:55
  • 阅读:2082

mui-col-xs 和slider一起用的诡异BUG

分类:MUI

上下结构,上方用slider的时候设置图片自动轮播, 下方另外一个div里面使用ul ->li结构 li的class 为mui-col-xs-4 也就是每行3个 自动换行的方式。 slider切换图片的时候中间的li 看起来宽度会变,chrome调试宽度数值没有变化,两边的没有变化。求解决

2015-06-13 16:31 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

截图一下,顺便把页面代码发出来

笔迹

笔迹 (作者)

<div class="mui-content">  
            <div id="slider" class="mui-slider">  
                <div class="mui-slider-group mui-slider-loop">  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <img src='../images/4.jpg'>  
                    </div>  
                    <div class="mui-slider-item ">  
                        <img src="../images/1.jpg">  
                    </div>  
                    <div class="mui-slider-item">  
                        <img src="../images/2.jpg">  
                    </div>  
                    <div class="mui-slider-item">  
                        <img src="../images/3.jpg">  
                    </div>  
                    <div class="mui-slider-item ">  
                        <img src='../images/4.jpg'>  
                    </div>  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <img src='../images/1.jpg'>  
                    </div>  
                </div>  
            </div>  
            <div id="good_brand">  
                <ul id="ul_good_brand" class="mui-table-view mui-grid-view">  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/gujinggongjiu.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/xuanjiu.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/yingjiagongjiu.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/kouzijiao.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/xianghe.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/jinzhongzi.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/maotai.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/wuliangye.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/lingshui.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/wenwanggongjiu.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/gaolujia.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/jianlanchun.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/baohejiu.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/zuisanqiu.jpg">  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                        <img class="mui-media-object" src="../images/logo/qianmaizhi.jpg">  
                    </li>  
                    <li id="li_brand_more" class="mui-table-view-cell mui-media mui-col-xs-12">  
                        <div style="border-top:1px solid #CFCED2"></div>  
                        <div style="margin-top: 8px; font-size: small;"><span>更多品牌</span>  
                        </div>  
                    </li>  
                </ul>  
            </div>

该问题目前已经被锁定, 无法添加新回复