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

这可能与每个div上的border: 1px solid有关（50％+ 1px + 50％+ 1px = 100％+ 2px），可能因为它们显示为block。

添加这些样式box-sizing:border-box;（允许使用宽度值计算边框）和display:inline-block;添加到.info-lt-content和info-rt-content div，看看是否有任何成功。

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

1 个答案: