鍍金池/ 問答/HTML/ display:table-cell 布局錯亂問題

display:table-cell 布局錯亂問題

   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#section-1" class="zoomIn">首頁</a></li>
            <li class="dropdown">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                    恒遠鑫達
                </a>
                <ul class="dropdown-menu">
                    <li class="col">
                        <ul>
                            <li><a href="">企業(yè)介紹</a></li>
                            <li><a>團隊管理</a></li>
                            <li><a>組織架構</a></li>
                        </ul>
                    </li>
                    <li class="col">
                        <ul>
                            <li><a>發(fā)展歷程</a></li>
                            <li><a>企業(yè)榮譽</a></li>
                        </ul>
                    </li>
                    <li class="col">
                        <div><img src="images/dropdown1.jpg"></div>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                    創(chuàng)新之路
                </a>
                <ul class="dropdown-menu">
                    <li class="col col-l">
                        <ul>
                            <li><a href="">董事長致辭</a></li>
                            <li><a>企業(yè)文化</a></li>
                            <li><a>發(fā)展戰(zhàn)略</a></li>
                            <li><a>智慧服務</a></li>
                        </ul>
                    </li>
                    <li class="col"><img src="images/dropdown2.jpg">
                        <p class="text-s text-white" style="padding-top: 10px">技術創(chuàng)新是中國夢,更是恒遠夢。</p></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                    產業(yè)服務
                </a>
                <ul class="dropdown-menu">
                    <li class="col">
                        <ul>
                            <li><a href="">工程基態(tài)</a></li>
                            <li><a>消防科技</a></li>
                            <li><a>酒店管理</a></li>
                        </ul>
                    </li>
                    <li class="col">
                        <ul>
                            <li><a href="">國際貿易</a></li>
                            <li><a>金融服務</a></li>
                            <li><a>產業(yè)布局</a></li>
                        </ul>
                    </li>
                    <li class="col"><img src="images/dropdown3.jpg"></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                    新聞中心
                </a>
                <ul class="dropdown-menu">
                    <li class="col">
                        <ul>
                            <li><a href="">企業(yè)新聞</a></li>
                            <li><a>行業(yè)動態(tài)</a></li>
                            <li><a>視頻中心</a></li>
                        </ul>
                    </li>
                    <li class="col"><img src="images/dropdown4.jpg"></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                    社會責任
                </a>
                <ul class="dropdown-menu">
                    <li class="col">
                        <ul>
                            <li><a href="">恒遠公益</a></li>
                            <li><a>恒遠黨建</a></li>
                        </ul>
                    </li>
                    <li class="col"><img src="images/dropdown5.jpg"></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                    人才發(fā)展
                </a>
                <ul class="dropdown-menu">
                    <li class="col">
                        <ul>
                            <li><a href="">人才戰(zhàn)略</a></li>
                            <li><a>員工關懷</a></li>
                            <li><a href="">人才招聘</a></li>
                            <li><a>聯(lián)系我們</a></li>
                        </ul>
                    </li>
                    <li class="col"><img src="images/dropdown6.jpg">
                        <p class="text-white text-s " style="padding-top: 10px">聯(lián)系電話:400 000 0230</p></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                    中<i class="fa fa-angle-down" style="padding-left: 5px" aria-hidden="true"></i>
                </a>
                <ul class="dropdown-menu language">
                    <li>
                        <a>中</a>
                    </li>
                    <li>
                        <a>En</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    .outdated {
  .navbar {
    position: absolute;
    width: 100%;
    .dropdown-menu {
      display: table;
      .col {
        height: auto;
        display: table-cell;
        min-width: 85px;
        img {
          display: inline-block;
          font-size: 0;
          width: 210px;
        }
        p {
          display: inline-block;
        }
      }
      .col-l {
        min-width: 100px;
      }
    }
  }
}

clipboard.png
要兼容ie9 開始用flex 不行 就換了table
這里面有圖片就不能一行排列會錯開 如果不是圖片.col就會排成一排 怎么修改能排成一排呢
clipboard.png

回答
編輯回答
初念

請給.col的父級加一個 row,比如下面這里,ul的class中多加一個 row

clipboard.png

2018年3月5日 13:51