如何自适应刷选菜单

梦里梦外; 2022-08-21 13:55 195阅读 0赞

用户的需求总是无限的，这边要把table-cell的方式去掉用，float：left来自动适应能够显示的筛选选项

#filterMenuOnsale {
                /*height: 148px;*/
                /*height: 193px;*/ /*不设置高度，让其根据筛选条件数量自适应*/
                border-top: solid 1px #CFCED3;
                border-bottom: solid 1px #CFCED3;
                box-sizing: border-box;
                margin: 0 auto;
                padding: 0 24px;
              
                overflow: hidden;
                /*position: fixed;*/
                /*position:static;*/
                position: absolute;
                z-index:1000;
                width: 10rem;
                background-color: #FFF;
                display: none;
                /*border-bottom:solid 1px  #CFCED3;*/
            }
    
    
            #filterMenuWillpublish {
                /*height: 148px;*/
                /*height: 193px;*/ /*不设置高度，让其根据筛选条件数量自适应*/
                border-top: solid 1px #CFCED3;
                border-bottom: solid 1px #CFCED3;
                box-sizing: border-box;
                margin: 0 auto;
                padding: 0 24px;
                   
                overflow: hidden;
                /*position: fixed;*/
                /*position: static;*/
                position: absolute;
                 z-index:1001;
                width: 10rem;
                background-color: #FFF;
                display: none;
                /*border-bottom:solid 1px  #CFCED3;*/
            }
    
    
            .content {
                display: table;
                width: 100%;
                /*padding:20px 0;*/
                /*padding: 1.25rem 0.109375rem;*/
            }
    
            .filter {
                display: table-cell;
                width: 33.33%;
                box-sizing: border-box;
                text-align: center;
                vertical-align: middle;
            }
    
            /*.Left {
                display: table-cell;
                
                text-align: center;
            }
    
            .Middle {
                display: table-cell;
           
                text-align: center;
                vertical-align: top;
                padding: 0 15px;
               
            }
    
            .Right {
                display: table-cell;
               
                text-align: center;
                vertical-align: top;
            }*/
    
            .filterButton {
                width: 80px;
                height: 32px;
                 
    
                border-radius: .2em;
                outline: solid 1px #CFCED3;
                display: block;
                vertical-align: middle;
                line-height: 2.0;
                margin: 13px 15px 13px 0px;
               
                font-family: STXihei;
    
         <span style="color:#ff0000;">           width: 28%;
        float: left;</span>
            }

关键红色的float：left和width来定义好样式，html里面没有变化，把left和middle以及right的class去掉

<div id="filterMenuOnsale">
                <div class="content">
                    <div class="filter">
                <a id="all"   class="filterButton SwitchColor" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).all==0?"display:none":"display:block"%>"><span>全部(<span class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).all %></span>)</span></a>
                         <a id="hybridType" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).混合型==0?"display:none":"display:block"%>"><span>混合型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).混合型 %></span>)</span></a>
               <a id="QDIIType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).QDII==0?"display:none":"display:block"%>"><span>QDII(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).QDII %></span>)</span></a>
                          <a id="breakevenType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).保本型==0?"display:none":"display:block"%>"><span>保本型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).保本型 %></span>)</span></a>
     
                       
              
                <a id="stockType" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).股票型==0?"display:none":"display:block"%>"><span>股票型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).股票型 %></span>)</span></a>
                      <a id="bondType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).债券型 ==0?"display:none":"display:block"%>"><span>债券型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).债券型 %></span>)</span></a>
                                   
                            <a id="CurrencyType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).货币型==0?"display:none":"display:block"%>"><span>货币型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).货币型 %></span>)</span></a>
                      <a id="setToOpen"  class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).定开债券 ==0?"display:none":"display:block"%>"><span>定开债券(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).定开债券 %></span>)</span></a>
                     
           
                <a id="stockIndexType" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).股票指数==0?"display:none":"display:block"%>"><span>股票指数(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).股票指数 %></span>)</span></a>
                      <a id="bondIndexType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).债券指数==0?"display:none":"display:block"%>"><span>债券指数(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).债券指数 %></span>)</span></a>
               
                      <a id="financingType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).理财型==0?"display:none":"display:block"%>"><span>理财型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).理财型 %></span>)</span></a>
                     <a id="othersType"  class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).其他==0?"display:none":"display:block"%>"><span>其他(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).其他 %></span>)</span></a>
                   
                </div>
                    </div>
            </div>
            
              <div id="filterMenuWillpublish">
                <div class="content">
                    <div class="filter">
                <a id="all2"   class="filterButton SwitchColor" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).all==0?"display:none":"display:block"%>"><span>全部(<span class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).all %></span>)</span></a>
                         <a id="hybridType2" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).混合型==0?"display:none":"display:block"%>"><span>混合型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).混合型 %></span>)</span></a>
               <a id="QDIIType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).QDII==0?"display:none":"display:block"%>"><span>QDII(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).QDII %></span>)</span></a>
                          <a id="breakevenType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).保本型==0?"display:none":"display:block"%>"><span>保本型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).保本型 %></span>)</span></a>
     
                      
                <a id="stockType2" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).股票型==0?"display:none":"display:block"%>"><span>股票型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).股票型 %></span>)</span></a>
                      <a id="bondType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).债券型 ==0?"display:none":"display:block"%>"><span>债券型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).债券型 %></span>)</span></a>
                                   
                            <a id="CurrencyType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).货币型==0?"display:none":"display:block"%>"><span>货币型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).货币型 %></span>)</span></a>
                      <a id="setToOpen2"  class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).定开债券 ==0?"display:none":"display:block"%>"><span>定开债券(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).定开债券 %></span>)</span></a>
                     
             
                <a id="stockIndexType2" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).股票指数==0?"display:none":"display:block"%>"><span>股票指数(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).股票指数 %></span>)</span></a>
                      <a id="bondIndexType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).债券指数==0?"display:none":"display:block"%>"><span>债券指数(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).债券指数 %></span>)</span></a>
               
                      <a id="financingType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).理财型==0?"display:none":"display:block"%>"><span>理财型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).理财型 %></span>)</span></a>
                     <a id="othersType2"  class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).其他==0?"display:none":"display:block"%>"><span>其他(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).其他 %></span>)</span></a>
                   
                </div>
                    </div>
            </div>

最后jquery要下去掉右边界的margin的操作：

$("#filterMenuOnsale").each(function () {
    
                
                    var i;
                    var number = 1;
                    for( i=0;i<12;i++)
                    {
                        
                        if ($(this).find("a").eq(i).attr("style").indexOf("block") != (-1)) {
                        if(number%3==0)
                            $(this).find("a").eq(i).css("margin", "13px 0px 13px 0px");
                        number++;
                        }
                 
                    }
                });
    
                $("#filterMenuWillpublish").each(function () {
    
    
                    var i;
                    var number = 1;
                    for (i = 0; i < 12; i++) {
    
                        if ($(this).find("a").eq(i).attr("style").indexOf("block") != (-1)) {
                            if (number % 3 == 0)
                                $(this).find("a").eq(i).css("margin", "13px 0px 13px 0px");
                            number++;
                        }
                        
                     
                    }
                
                });

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关自制HTML5+CSS3移动端自适应菜单导航

自己自制HTML5+CSS3的移动端自适应菜单导航，用到弹性盒子布局及媒体查询语法。 HTML部分：注意必须写入自适应meta语法： <meta name="vi

逃离我推掉我的手/ 2023年03月02日 10:52/ 0 赞/ 35 阅读

相关如何使用弹性布局？如何做到自适应?

1、简单介绍如何使用弹性布局 1、父元素必须的属性：`display:flex;`；这里，我一般都会写一个弹性样式的class，如下： /默认横向显示的/

系统管理员/ 2023年02月09日 13:14/ 0 赞/ 50 阅读

相关 ECharts如何让图表自适应

1.获取图表id let myChar = echarts.init(document.getElementById('char')); 2.生成图表

￡神魔★判官ぃ/ 2022年12月05日 15:20/ 0 赞/ 298 阅读

相关 html页面高度自适应的特点,css如何高度自适应浏览器高度？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。 ![682b19391f3

悠悠/ 2022年10月06日 08:00/ 0 赞/ 388 阅读

相关如何自适应刷选菜单

用户的需求总是无限的，这边要把table-cell的方式去掉用，float：left来自动适应能够显示的筛选选项 filterMenuOnsale {

梦里梦外;/ 2022年08月21日 13:55/ 0 赞/ 196 阅读

相关如何设计自适应网页

现在的网站不仅需要兼容各种浏览器还需要能自适应不同终端，今天总结下常用来设计自适应网页设计的步骤。 > 网页自适应设备 <meta name="viewport"

迷南。/ 2022年07月29日 09:28/ 0 赞/ 208 阅读

相关 Qt自适应大小显示图片，添加菜单

由于后面的图像处理需要UI，OpenCV自带也不怎么会，MFC实在懒得学的。听同学说Qt不错，就用Qt做UI了。本文主要介绍三个内容：在Qt Creator中使用OpenC

电玩女神/ 2022年06月18日 08:52/ 0 赞/ 435 阅读

相关 ios自动上下拉菜单，自适应宽高

![Center][]![Center 1][] 相关代码： ![Center 2][] 适用： ![Image

布满荆棘的人生/ 2022年06月10日 11:55/ 0 赞/ 253 阅读

相关如何实现自适应布局的？

最近为了能够做出自适应的页面找了很多资料，大致较为有用的两类 1.根据屏幕大小不同引入不同的css样式文件 <link href="css/css-pc.css"

亦凉/ 2022年05月31日 03:09/ 0 赞/ 380 阅读

相关 CSS实现自适应菜单

CSS实现自适应左侧菜单先看效果图菜单需要的数据结构实现代码js(react) css部分总结先看效果图 !

妖狐艹你老母/ 2022年04月01日 03:10/ 0 赞/ 493 阅读