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

Question

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

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

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

这可能吗？

这里的主要问题是我必须使用position:absolute 让图像与谷歌地图中的“关闭按钮 div”重叠。否则左边总会有一个空白。

<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>

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>