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

【问题标题】：How can I align div elements of a page equally and set my divs in same size?如何平均对齐页面的 div 元素并将我的 div 设置为相同大小？
【发布时间】：2015-02-21 18:58:30
【问题描述】：

我的 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 更准确地并排？

【问题讨论】：

将盒子设置为相同的高度可以实现这一点（尽管您可能需要补偿填充）。

标签： javascript html css svg

【解决方案1】：

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

【讨论】：

【解决方案2】：

似乎标签 div.class="main" 和 div.class="column_left" 还没有关闭。

【讨论】：