display:table-cell 布局错乱问题

Question

   <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="">企业介绍</a></li>
                            <li><a>团队管理</a></li>
                            <li><a>组织架构</a></li>
                        </ul>
                    </li>
                    <li class="col">
                        <ul>
                            <li><a>发展历程</a></li>
                            <li><a>企业荣誉</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">
                    创新之路
                </a>
                <ul class="dropdown-menu">
                    <li class="col col-l">
                        <ul>
                            <li><a href="">董事长致辞</a></li>
                            <li><a>企业文化</a></li>
                            <li><a>发展战略</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">技术创新是中国梦，更是恒远梦。</p></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>
                            <li><a>酒店管理</a></li>
                        </ul>
                    </li>
                    <li class="col">
                        <ul>
                            <li><a href="">国际贸易</a></li>
                            <li><a>金融服务</a></li>
                            <li><a>产业布局</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="">企业新闻</a></li>
                            <li><a>行业动态</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">
                    人才发展
                </a>
                <ul class="dropdown-menu">
                    <li class="col">
                        <ul>
                            <li><a href="">人才战略</a></li>
                            <li><a>员工关怀</a></li>
                            <li><a href="">人才招聘</a></li>
                            <li><a>联系我们</a></li>
                        </ul>
                    </li>
                    <li class="col"><img src="images/dropdown6.jpg">
                        <p class="text-white text-s " style="padding-top: 10px">联系电话: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;
      }
    }
  }
}

要兼容ie9 开始用flex 不行 就换了table
这里面有图片就不能一行排列会错开 如果不是图片.col就会排成一排 怎么修改能排成一排呢

Answer 1

请给.col的父级加一个 row，比如下面这里，ul的class中多加一个 row