Question

我想在InfoWindow视图上创建google maps： http://jsfiddle.net/q6tf9kp6/2/

我想要的是：（动态）图像应该从标题下面的开始，并且框应该自动展开以便整个图像适合

（无需在CSS中明确预先定义框的高度，因为图像将通过动态提供，因此预先不知道尺寸。）

这可能吗？

这里的主要问题是我必须使用position:absolute使图像重叠＆＃34;关闭按钮div＆＃34;来自谷歌地图。否则左边总会有一个白色的空白区域。

＆＃13;

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
    var loc, map, marker, infobox;
    
    loc = new google.maps.LatLng(-33.890542, 151.274856);
    
    map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: loc,
         mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    marker = new google.maps.Marker({
        map: map,
        position: loc,
        visible: true
    });

			var infobox = new google.maps.InfoWindow({
			    content: document.getElementById("infobox"),
			    maxWidth: 300
			});
    
    google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(loc);
    });
    
    infobox.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map" style="width: 100%; height: 300px"></div>
<br>
<div class="infobox-wrapper">
    <div id="infobox">
        <h4>Some long headlineeeeeeeeeeeee</h4>
        <div style="float:left">
            <div style="display:inline-block">
                <div>Name1</div>
                <div>Name2</div>
            </div>
            <div style="display:inline-block; position:absolute; bottom: 2px; right:2px;">
                <img src="http://www.4homejendrny.de/hintergruende/hell/hg009.jpg"/>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 1

使用position: absolute将图像从正常流中移除，从而阻止其容器正确计算高度。首先，您可以使用float: right显着简化信息框内容并将图像放在所需位置。你没有详细说明你想要的东西，但这对我来说似乎是合理的：

<h4>Some long headlineeeeeeeeeeeee</h4>
<div>
  <div style="float:right">
    <img src="http://www.4homejendrny.de/hintergruende/hell/hg009.jpg" />
  </div>
  <div>
    <div>Name1</div>
    <div>Name2</div>
  </div>
</div>

然后，如果您不希望关闭按钮左侧有空格，则可以使用position: relative; top: -17px提升整个内容。我选择-17将文字基线与结束X对齐。

<div class="infobox-wrapper">
  <div id="infobox" style="position:relative; top:-17px">
    <h4>Some long headlineeeeeeeeeeeee</h4>

这是在行动：

function initialize() {
  var loc, map, marker, infobox;

  loc = new google.maps.LatLng(-33.890542, 151.274856);

  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: loc,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  marker = new google.maps.Marker({
    map: map,
    position: loc,
    visible: true
  });

  var infobox = new google.maps.InfoWindow({
    content: document.getElementById("infobox"),
    maxWidth: 300
  });

  google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
  });

  infobox.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

<div id="map" style="width: 100%; height: 300px"></div>
<br>
<div class="infobox-wrapper">
  <div id="infobox" style="position:relative; top:-17px">
    <h4>Some long headlineeeeeeeeeeeee</h4>
    <div>
      <div style="float:right">
        <img src="http://www.4homejendrny.de/hintergruende/hell/hg009.jpg" />
      </div>
      <div>
        <div>Name1</div>
        <div>Name2</div>
      </div>
    </div>
  </div>
</div>

如何将文本扩展父div旁边的图像对齐到全高？

1 个答案: