如何平均对齐页面的div元素并将div设置为相同的大小？

Question

我的html布局在2个不同的div中，我想要均匀对齐。

在

之后（期望）

我怎样才能实现它？我的HTML是

    .main {
            overflow: hidden;
            display: block;
        }
        
        .column_left {
              float: left;
        }


#mapcontainer {
     margin: 16px 0 0 32px;
    position: relative;
    padding-bottom: 26px;
}

            .box {
                display: block;
                overflow: hidden;
                background: #ffc801;
                padding: 10px;
                padding-top: 20px;
                margin: 8px 0px 8px;
                font-family: 'avantgardebook', sans-serif;
                font-weight: 300;
            }
            
            .box h2 {
                font-size: 16px;
                margin-bottom: 8px;
                margin-top: 0;
            }
            
            .box ul {
                padding-left: 16px;
                margin: 0;
            }
            
            .box li {
                margin-bottom: 16px;
            }
            
            #regions {
                float: left;
                z-index:5;
                display: block;
                overflow: hidden;
                width: 400px;
                font-size: 19px;
                margin-left: 4px;
                font-weight: 500; /* medium */
            }
            
            #regions .regions_one, #regions .regions_two {
                font-family: 'avantgardemd', sans-serif;
                float: left;
                width: 200px;
            }
            
            #regions h2 {
                display: block;
                clear: both;
                padding: 12px 0 4px;
                margin: 0;
                font-size: 14px;
            }
            
            #regions ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            
            #regions ul li {
                display: block;
                clear: both;
                overflow: hidden;
                margin-bottom: 0;
            }
            
            #regions a {
                line-height: 20px;
                font-size: 15px;
                display: block;
                float: left;
                font-weight: 500; /* medium */
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="column_left">
        <div class="box">
    
            <ul>
               <li>Buy and sell <a href="/india/cars-for_sale">cars</a>, check our <a href="/india/real_estate">real
                    estate</a>
                    section, find <a href="/india/jobs">jobs</a>, and much more.
                </li>
                <li>Check our <strong><a href="/india">{{count}} ads online</a></strong> and find what you are looking for
                    in
                    your region or in all India.
                </li>
            </ul>
    
    
        </div>
    
        <div id="regions">
    
    
    </div>
    <div id="mapcontainer">
    
    
         <div id='visualization'></div>
        <script type="text/javascript">$(document).ready(function () {
            $("#regions a").add("area").mouseover(function () {
                var id = this.id.substring(this.id.indexOf("_") + 1);
                var regionmap = $("#hoverregion_" + id);
                if (regionmap && regionmap.length > 0) {
                    $("#area_highlight").removeClass().addClass("sprite_index_in_in_hover_region" + id);
                    $("#region_" + id).css("text-decoration", "underline");
                }
            });
            $("#regions a").add("area").mouseout(function () {
                var id = this.id.substring(this.id.indexOf("_") + 1);
                var regionmap = $("#hoverregion_" + id);
                if (regionmap && regionmap.length > 0) {
                    $("#area_highlight").removeClass();
                    $("#region_" + id).css("text-decoration", "none");
                }
            });
        });</script>
    
    
    </div>

如果有帮助我可以针对问题制作fiddle并创建一个我们可以对齐的最小示例问题。看起来框架不会让我们对齐它，或者你是否看到我可以在我的小提琴中改变哪些因为div更准确地并排？

Answer 1

如果您不支持旧浏览器，请查看flex。这里解释了Flexbox：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

似乎标签div.class =＆＃34; main＆＃34;和div.class =＆＃34; column_left＆＃34;没有关闭。