0

我的 div 高度有问题。我在左 div“image_view”中有一个图像，这个 div 的高度是基于图像的。在右侧，我有一个包含一些信息的 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>

谢谢

4

4 回答 4

2

你可以这样做：

$('#info_image').css("height", $("#image_view").height());
于 2012-10-30T12:27:58.460 回答
1

或者，您可以使用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>
于 2012-10-30T12:30:15.597 回答
0

没有 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>' 的样式。

这是一个小提琴

于 2012-10-30T12:37:03.087 回答
0

您可以使用 jQuery 的height()功能：

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

jsFiddle在这里

于 2012-10-30T12:40:55.840 回答