在谷歌地图信息窗口中将 2 个 DIV 彼此相邻对齐

Question

超级简单的问题，我有麻烦让这两个div在谷歌地图信息窗口内彼此对齐。我已经在这个问题上工作了相当长的一段时间，最终决定把它带到堆栈溢出。你们能帮我解决这个问题吗?

var template =
'<div class="containter" style="height: 100%; width:300px;">'+
    '<div class="infobox-header" style="margin: 2px; border-bottom: 1px solid #e6e6e6">'+
        '<strong><h4>'+streetAddress+'</h4></strong></div>'+
    '<div class="infobox-content" style="margin: 2px; padding: 5px; border: 1px solid">'+
        '<div class="info-lt-content" style="width: 50%; padding: auto;border: 1px solid">'+
            '<img src ='+defaultPic+' height = 100% width = 100%></a>'+
        '</div>'+
        '<div class="info-rt-content" style="width: 50%; padding: auto;border: 1px solid">'+
                'Bed: '+getDB('bedrooms', this.id)+'<br>'+
                'Bed: '+getDB('bathrooms', this.id)+'<br>'+
        '</div>'+
    '</div>'+
    '<div class="infobox-footer" style="margin: 2px; padding: 5px auto auto 5px; border-top: 1px solid #e6e6e6">'+
        '<a href = "../property_info/index.php?id='+this.id+'"><button type="button" class="btn btn-warning">View Listing</button></a>'+
    '</div>'+
'</div>';
infoWindow.setContent(template);
infoWindow.open(map, this);

Answer 1

这可能与border: 1px solid在每个div (50% + 1px + 50% + 1px = 100% + 2px)，也许是因为他们是显示block。

添加这些样式box-sizing:border-box;(允许边界与宽度值计算)和display:inline-block;到你的.info-lt-content和info-rt-contentdiv，看看你是否有任何成功。