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

Question

super 简单的问题 我无法让这两个 div 在 google map 信息窗口中彼此相邻对齐。我已经在这个问题上工作了很长一段时间，最后决定把它带到堆栈溢出。你们能帮我解决我的问题吗？

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，看看是否成功。