jquery - 为什么在添加 Google Map 时两个 DIVS 没有对齐

Question

我的 HTML 代码:

<div class="section group">
    <div class="col span_2_of_3 vertAlign">
        <div id="ctl00_BodyPlaceHolder_AddressContentBlock">
            <div class="serviceHolder brClear theAdd"><h2 class="pageIntro">1 maple street</h2>New Roc<br />New Roc<br />09099<br />(934) 313-0909
                <div class="hideContent mapUse">1 maple street New Roc New Roc 09099</div>
            </div>
        </div>
    </div>
    <div class="col span_1_of_3 gMapHolder">
    </div>
</div>

JQuery:

<script>
    $(document).ready(function () {
        alert($(".mapUse").text());
        var k = $(".mapUse").text();
        var embed = "<iframe width='425' height='350' frameborder='0' scrolling='no'  marginheight='0' marginwidth='0'   src='https://maps.google.com/maps?&amp;q=" + encodeURIComponent(k) + "&amp;output=embed&iwloc'></iframe>";
        $(".gMapHolder").html(embed);
    });
</script>

CSS:

.gMapHolder iframe
{
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}
.serviceHolder
{
    width: 100%;
    overflow: hidden;
}
.brClear
{
    clear: both;
}
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    overflow: hidden;
    width: 100%;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

左边的 DIV 延伸到右边 DIV 的高度以下，带有 map :

如何让左边的 DIV 匹配高度或保持与右边的 DIV 相同的位置

Answer 1

fiddle

http://jsfiddle.net/36cxLucr/4/

添加这个

.col:first-child {
margin-left: 0;
vertical-align: top;
}