没有JavaScript的解决方案

Question

我有div高度的问题。我在左侧div“image_view”中有一个图像，这个div的高度是基于图像的dinamically。在右侧，我有一个带有一些信息的div。此div必须与image_view div具有相同的高度。我该怎么做？这是我的代码。

<div id="image_view">
    <img src="<?php echo base_url().'upload/images/'.$nome_immagine; ?>" />
</div>
<div id="info_image" style="height:<?php echo $altezza.'px'; ?>">
   content of this div
</div>

由于

Answer 1

你可以这样做：

$('#info_image').css("height", $("#image_view").height());

Answer 2

或者，您可以使用getimagesize()获取图片高度，并将其指定给info_image元素。

<?php 
$imagePath = base_url().'upload/images/'.$nome_immagine;
$size = getimagesize($imagePath);
?>

<div id="image_view">
    <img src="<?php echo $imagePath; ?>" />
</div>
<div id="info_image" style="height:<?php echo $size[1].'px'; ?>">
   content of this div
</div>

Answer 3

没有JavaScript的解决方案

您可以重新构建HTML，强制<div>与图像的高度相同：

<强> HTML

<div id="image-info-container">
   <div id="image-info">
       <div id="image">
           <img src="" />
       </div>
       <div id="info">
           info here
       </div>
       <div style="clear:both;"></div>
   </div>
</div>

<强> CSS

#image-info {
    width: 600px;
    background:#eeeeee;
}

#info {
    float: left;
    width: 200px;
    background: #eee;
}

#image {
   float: left;
   background: #f0e;
   width: 400px;
}

#image img {
   height: 500px; 
}

这会强制#image-info-area与图像的高度相同，无论如何，您都可以设置<div>的样式。

Here's a fiddle

Answer 4

您可以使用jQuery的height()函数：

$('#info_image').height($('#image_view').height());

jsFiddle here

高度div和图像

4 个答案:

没有JavaScript的解决方案