请问怎么才能和图一一样排成4块并行,我分块就掉下去了，还空出来好大一块.

-----我写的-------------

    <style>
        .footer-head{
            padding: 60px 0;
        }
        .footer-head .container{
            margin-left: auto;
            margin-right: auto;
            padding-right: 15px;
            padding-left: 15px;
            width: 1170px;
            display: table;
        }
        .footer-head .container h4{
            font-size: 28px;
            font-family:'fontawesome-webfont', serif;
            color: #01a185;
            margin-bottom: 16px;
        }
        .footer-head .col_md1 p{
            color: #979797;
            font-size: 13px;
            line-height: 26px;
            margin-top: 15px;
        }
        .footer-head .col_md2 a{
            color: #979797;
            font-size: 13px;
            line-height: 26px;
            margin-top: 15px;
        }
        .footer-head .col_md2 li{
            margin: 13px 0;
        }
        .footer-head .col_md3 li{
            margin: 13px 0;
        }
        .footer-head .col_md3 a{
            color: #979797;
            font-size: 13px;
            line-height: 26px;
            margin-top: 15px;
        }
        .footer-head .col_md4 .subheading{
            color: rgba(89, 194, 175, 0.79);
            font-size: 13px;
            margin-bottom: 1em;
            font-family: 'Open Sans', sans-serif;
            display: block;
        }
        .footer-head address{
            width: 100%;
            font-size: 0.9em;
            line-height: 2.4em;
            margin-bottom: 20px;
            font-style: normal;
        }
        .footer-head .col_md4 address span{
            color: #fff;
            font-size: 10px;
            background-color: rgba(89, 194, 175, 0.68);
            padding: 6px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
           font-family: 'Glyphicons Halflings',serif;
        }
        .footer-head .col_md4 address .loction:before{
            content: "\e062";
            position: relative;
        }
        .footer-head .col_md4 address .phone:before{
            content: "\e182";
            position: relative;
        }
        .footer-head .col_md4 address .e-mile:before{
            content: "\2709";
            position: relative;
        }
        .footer-head .col_md4 ul li a{
            color: #979797;
        }
        .footer-head .col_md4 .location{
           margin-top: 1em;
            display: block;
        }
        .footer-head .col_md4 ul li{
            display: inline-block;
            float: left;
            margin: 0;
        }
        ul.location li:nth-child(2) {
            float: right;
            width: 85%;
            color: #979797;
            font-size: 0.95em;
            line-height: 2em;
            margin: 0;
        }
        .footer-head .col_md1,.col_md2,.col_md3,.col_md4{
            float: left;
            padding-right: 15px;
            padding-left: 15px;
            width: 25%;
        }
        .footer-end{
            background: blue;
            height: 600px;
            width: 100%;
        }
    </style>

 <div class="footer-head">
        <div class="container">
            <div class="foo-grd">
            <div class="col_md1">
                <h4>Who We Are</h4>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                <p>The point of using Lorem Ipsum is that it has a more-or-less normal letters, as opposed to using 'Content here.</p>
            </div>
            <div class="col_md2">
                <h4>Help</h4>
                <ul>
                    <li><a href="#">How it Works</a></li>
                    <li><a href="#">Sitemap</a></li>
                    <li><a href="#">Faq</a></li>
                    <li><a href="#">Feedback</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Shortcodes</a></li>
                </ul>
            </div>
            <div class="col_md3">
                <h4>Information</h4>
                <ul>
                    <li><a href="#">Locations Map</a></li>
                    <li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Popular searches</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
            <div class="col_md4">
                <h4>Contact Us</h4>
                <span class="subheading">Our headquarters</span>
                <address>
                    <ul  class="location">
                        <li><span class="loction"></span></li>
                        <li>center for financial assistance to deposed nigerian royalty</li>
                    </ul>
                    <ul class="location">
                        <li><span class="phone"></span></li>
                        <li>+0 561 111 235</li>
                    </ul>
                    <ul class="location">
                        <li><span class="e-mile"></span></li>
                        <li><a href="mailto:info@example.com">mail@example.com</a></li>
                    </ul>
                </address>
            </div>
            </div>
        </div>
    </div>

1. 建议用弹性盒子flex布局，每个25%；
   或者
2. 使用UI框架例如elementUI 中的el-row, el-col 进行布局。其他的框架例如bootstrap也有类似的解决方案

给需要排列的每个盒子设置 左浮动就好了 不要一个左浮动 一个右浮动
还有 建议用flex弹性布局 比用浮动简单很多

沙发