图片和信息div不会自动占据相同的高度
是因为它们的高度由不同的因素决定。
首先，图片的高度通常由其原始尺寸决定。如果没有设置图片的高度属性，它将按照原始尺寸显示，可能导致与信息div的高度不一致。
其次，信息div的高度通常由其内容的多少决定。如果信息div中的文本内容较少，它的高度会相应较小。如果信息div中的文本内容较多，它的高度会相应较大。
为了使图片和信息div占据相同的高度，可以通过以下方法之一来实现：
- 设置固定高度：可以通过为图片和信息div设置相同的固定高度来使它们占据相同的高度。但这种方法可能导致图片变形或信息div内容溢出。
- 使用CSS Flexbox布局：使用Flexbox布局可以轻松实现图片和信息div的等高。将它们放置在一个父容器中，并将该父容器的display属性设置为flex，然后使用align-items属性将图片和信息div垂直对齐。
- 使用JavaScript动态计算高度：可以使用JavaScript来动态计算图片和信息div的高度，并将它们设置为相同的高度。这可以通过获取图片和信息div的高度，然后将较小的高度应用于较大的元素来实现。
总结起来，要使图片和信息div自动占据相同的高度，可以使用CSS Flexbox布局或JavaScript动态计算高度的方法。具体选择哪种方法取决于实际需求和项目要求。
腾讯云相关产品和产品介绍链接地址：
- CSS Flexbox布局：https://cloud.tencent.com/product/css
- JavaScript动态计算高度：https://cloud.tencent.com/product/js
相关·内容
我想在左边有一个图像，在右边有一些信息。右边的信息div周围有一个橙色的边框。我希望这个信息区域占据图像的相同高度。所以我创建了一个带有display flex和align- .details stretch的div项目。但是它不工作，图像和信息区域不占用相同的宽度。你知道为什么吗？示例：
h
浏览 11提问于2018-01-09得票数 0
回答已采纳
*所有原始图像大小至少为父div宽度除以n的宽度
例如，我有一行3个图像，因此每个图像将占据父div的33%。这些图像的高度不会被定义为保持纵横比，但我希望父div采用最短的孩子的高度，而不是最高的孩子的高度，以避免较短图像下的空白。我不担心这里奇怪的裁剪，因为点击图片实际上
浏览 0提问于2014-04-14得票数 1
在我的windows应用程序中，我在右边停靠了一个面板，其中有一个分组框和取消和打印按钮。我有另一个带有按钮和分组框的面板，单击按钮时，组框的位置被更改，使其成为一个自定义滑块，必须放置在此面板的上方。我不能将滑块面板放在这个右侧停靠的面板中，因为宽度不同。我可以在不停靠的情况下将滑块面板放在这个右侧停靠的面板上。但当窗口调整大小时，所有停靠的面板都会相应地调整大小，但此滑块面板除外。
右侧停靠面板
浏览 0提问于2019-08-16得票数 0
我在其他一些div中有一个div (div1)。现在，我希望这个div具有与主体相同的宽度(占用显示的全部宽度)，但始终具有与其父级(div2)相同的高度和位置。我试过在这个div (div1)上使用“绝对；”这个位置。那我也可以
将身体设置为相对位置；并使div1占据100%宽，但现在我很难使其高度<
浏览 0提问于2020-05-23得票数 0
回答已采纳
即使图片尺寸小于表格单元格，如何让image占据整个table cell的宽度和高度？我的图片在div标签里面。
浏览 3提问于2011-10-13得票数 1
我想在边框布局的北边位置创建一个JLabel (包含一个图像)，它会自动调整到与边框布局中心位置的组件的首选宽度匹配的长度。目前我唯一能做到这一点的方法是在北边位置创建另一个面板，并在该面板的中心位置添加标签。
有没有办法在没有额外面板的情况下做到这一点？
浏览 0提问于2010-07-27得票数 0
回答已采纳
2回答
我使用引导网格，我想实现一个响应的布局，如下图所示：也就是说，第一个布局是为md，lg和xl设备，那里有一个图像在左边，然后一些信息在右边。这个右边有信息的div应该有相同的图像高度。然后，在较小的设备中，我希望得到与下面的图像相适应的布局，其中图像在上面，信息在下面。但它不能正常工作：
细节div出现在右边，但我希望这个细节div</em
浏览 3提问于2018-01-09得票数 0
回答已采纳
我定义了以下header元素： <div class="row"> </div>
<div class="col-md-4 hidden-xs header-image"&
浏览 1提问于2014-03-03得票数 1
我有一个通过UINavigationViewController推送的UIViewController。
视图控制器的视图有一个UIScrollView作为子视图。我使用与视图控制器的视图边界相同的边界初始化UIScrollView，并将自动调整蒙版大小设置为灵活的高度/宽度，这样它仍然会占据整个屏幕。当视图控制器在纵向模式下按下时效果很好(方向改变效果很好)，但如果我在横向模式下按下它，滚动视图不会<em
浏览 2提问于2010-08-10得票数 0
回答已采纳
3回答
但是，我想根据屏幕的大小来减小高度。如果我尝试height: auto，这将覆盖600px的代码。我把图片放在800px的容器里。 我能做什么?
浏览 40提问于2020-06-08得票数 0
我有一个父级div或class=row，以及两个分别为class=colo-xs-6的子级。我希望有空间之间，但也有边界。所以我给每个人都增加了一个孩子。-xs-6类提供一个15 my填充，所以我得到了我的空间。现在的问题是，我希望它们的大小是一样的。
我的问题是，包含内容的第二
浏览 3提问于2016-02-01得票数 1
我有一个带有内容伸缩的容器伸缩。如何让内容flex占据容器flex的全部宽度和高度。flex-direction: row;flex: 1;.content{width: 100%;} 上面的代码使内容占据容器的100%宽度，但高度基于内容中的文本。我尝试了类似问题中提到的解决方案，但没有运气，它仍然是一样
浏览 0提问于2015-08-09得票数 1
2回答
我在.img-container中有一个正方形的图像。有时，加载图像需要几秒钟的时间，并且.img-container会折叠，并且仅在图像加载时占用整个高度。然而，我希望它在加载图像时保持完整的高度(就像图像在那里一样)。我可以通过在img-container上设置一个min-height类很容易做到这一点，但是它是一个流畅的网格，图像是响应性的(注意bootstrap的img-responsive助手类)，这使得很难为不同的屏幕尺寸
浏览 0提问于2014-02-24得票数 26
回答已采纳
我目前有一个包装器div，它有两个孩子: div left和div right。在div左边，我有一个textarea；在div右边，我有一个iframe。body {}
height: 80%; height: 80%;
}如我所料，iframe占据了整个页面宽度<em
浏览 0提问于2012-02-15得票数 0
我一直在寻找这个问题的答案。我更喜欢只有CSS的解决方案，但我一直找不到。
我有一个固定宽度的弹出窗口，如果内容更大，它会增加高度。在里面，我放了一个图片，它应该占据弹出窗口的一半，同时保持宽高比，并且在不离开屏幕的情况下尽可能地大，还有一个div用来保存关于图片的信息，它也应该是屏幕的一半，这样图片和div是
浏览 0提问于2018-01-22得票数 0
3回答
我已经搜索过了，但找不到我想要实现的东西，在CSS中，我不确定是否有jQuery脚本可以帮助我。我想在我的网站上创建一个div，填充整个页面的高度(不超过滚动条下面的区域，只是垂直填充的屏幕的第一个区域)。我想让它适应设备的高度，比如在桌面和iPhone上，整个屏幕的垂直高度都是填充的。我不确定我是否可以发布网站，但这就是我想要的
浏览 2提问于2014-06-12得票数 1
我有两个div，我试图确保左子div扩展到父div的75%，而右子div占据其余空间。我已经弄明白了这一部分，但是我如何确保右子div的高度总是与左子div的高度相同呢？CodeSandbox 在这里，我想让绿色div的高度与红色div相同，但无论我做什么，它都不会<
浏览 171提问于2020-07-08得票数 0
回答已采纳
2回答
我有一个middleContent div，它有两个子div作为列。middleMain div运行良好，middleRight div不会显示，除非我用一些内容填充它或使用绝对定位。这是我的页面的图片：#middleContent position:relative; height:auto; height:100%; ba
浏览 0提问于2011-12-20得票数 1
回答已采纳
2回答
我正在使用的启动带3现在在一个网站项目。我有问题，使用img响应，使我的图像响应。 <div class="col-md-4">
<img class=
浏览 1提问于2014-03-30得票数 0
回答已采纳
2回答
我有两个连接的div元素，在左边有图像列表，在右边有每个图像的详细信息。我打开右边的div点击图片，它有绝对的位置，但是我遇到了一个问题。我需要计算这两个div的高度，所以我总是有相同的高度-每次我点击某个东西，改变一些东西……(我只能在左边的div中有一张图片，它有很多信息
浏览 0提问于2018-01-31得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
