如何使三个内部div具有相同的高度？
要使三个内部div具有相同的高度，可以使用CSS的Flexbox或Grid布局。以下是两种方法的示例：
- 使用Flexbox布局：
HTML代码：
<div class="container">
<div class="box">内容1</div>
<div class="box">内容2，这个div的高度会自动调整以与其他div相同</div>
<div class="box">内容3</div>
</div>CSS代码：
.container {
display: flex;
}
.box {
border: 1px solid black;
padding: 20px;
margin: 10px;
}- 使用Grid布局：
HTML代码：
<div class="container">
<div class="box">内容1</div>
<div class="box">内容2，这个div的高度会自动调整以与其他div相同</div>
<div class="box">内容3</div>
</div>CSS代码：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box {
border: 1px solid black;
padding: 20px;
margin: 10px;
}这两种方法都可以使三个内部div具有相同的高度。你可以根据自己的需求选择使用哪种方法。
相关·内容
4回答
我有一个div里面只有一个图像。图像通常占据div中的整个空间，div和图像具有相同的高度。除了当窗口被缩小，图像调整它的大小，所以它是响应的，但div保持相同的高度。如何使div始终具有与其内部的图像相同的</e
浏览 6提问于2017-03-02得票数 1
回答已采纳
6回答
我有一个简单的示例，其中外部DIV包含一个内部DIV，它具有因为我已经设置了内部div的高度，所以我期望外部div与内部div具有相同的高度。相反，外部div稍微高一点，你可以从小提琴看到。问:为什么会发生这种情况?我如何“填
浏览 7提问于2014-12-17得票数 18
回答已采纳
2回答
在这个简单的示例中，内部标记的高度为14px，而外部标记的高度为20px。如何使容器标签具有与其子标签相同的高度？我尝试将div设置为inline-block，但没有任何效果。<div>
<i class="glyphicon glyphicon-folder-close"></
浏览 13提问于2016-09-26得票数 0
回答已采纳
3回答
我有一个外部的DIV (4)和三个内部DIV (1-3)。我不在乎这里的宽度。这都是关于高度和垂直对中。我想让外部的DIV (4)得到最高的内部DIV的高度(A行2)。更重要的是，我希望其他内部DIV (A行中的1和3)垂直地居中(相对于具有与最高<e
浏览 2提问于2016-11-11得票数 3
回答已采纳
2回答
我在div元素中有一个表。div仅用作占位符(它具有“固定”位置和硬定义的大小/左/上)。表格有100%的宽度和高度( div)。--------<
浏览 1提问于2011-07-31得票数 2
我想在父div标签中显示三个div标签父div没有宽度和高度，一个内部div将位于左侧，具有固定的宽度和高度，第二个内部div将位于中心，具有固定的高度，其宽度位于其他两个div标签之间第三个内部divheight: 400px; #colum
浏览 0提问于2013-10-25得票数 0
5回答
我想使三个内部div具有相同的大小。你能告诉我这是怎么回事吗？
实际上，我希望内部div是均匀分布的，所以当我添加一个边距时，我得到的结果是：，内部div不再在同一行上。
浏览 0提问于2012-09-21得票数 0
回答已采纳
我正在尝试做的是布局三个<div>：顶部(用于导航)、中心和页脚<div>。顶部和底部的<div>具有固定的高度。
如何使中心<div> 100%伸展，并减去其他部分(顶部和底部)的高度？注意:我已经给了正文，html的高度是100%。
浏览 3提问于2010-04-15得票数 0
2回答
它是一个不断增长的内容容器。这当然可以用javascript来完成，但我很好奇的是，这是可以用更少的东西来完成的。附言:如果任何人想插入任何好的教程/阅读材料，我将很高兴看到它。
浏览 0提问于2014-09-21得票数 0
2回答
<div class="row">Side Bar Content HereMain Contentof the page</div>
我在侧栏上使用背景色。现在的问题是将侧边栏<em
浏览 4提问于2013-08-20得票数 0
回答已采纳
所以我在一个视频播放器旁边有一个列表，如图所示
我希望菜单是可滚动的，并且只有和视频播放器一样大的菜单。问题是，视频播放器是响应的，所以高度可以根据屏幕的宽度而变化。HTML代码看起来有点像这样： <div class="col-9">
<videoi
浏览 3提问于2017-06-08得票数 1
回答已采纳
当在块元素周围放置边框时，为什么元素在中的视高度增加了1？报告的offsetHeight仍然等于所需的高度加上边框宽度。
#outer { height: 10px; width: 1
浏览 9提问于2022-04-18得票数 -1
很明显，如何用挠曲盒使两个斜面的高度与最高的一个相同。例如，我在一行中有两个div，第一个div的高度取决于内部图像的大小。所以我想把第二div的高度设为同样的。
浏览 6提问于2016-02-14得票数 2
回答已采纳
4回答
我试图得到两个div，没有一个普通的父div作为较大的div的高度。(使用display: flex)。
如上面的代码所示，我希望<child-div1>和<child-div2>具有相同的高度。目前，我在<parent-div>上有<parent-div>，它成功地使</
浏览 12提问于2022-01-25得票数 1
3回答
尝试设置高114px、宽100% (页面宽度)的外部DIV。在里面，我需要三个DIVs，左，中，右。这些内部3个div的高度各不相同。我希望所有三个内部DIVs从上到下居中(垂直对齐)。我已经接近了左右浮动或左:0和右:0，但停留在垂直居中的部分。左边和右边的DIVs只包含图像的中心文本。很难在jsfiddle上显示图片，所以我不能提供太多的例子
浏览 2提问于2013-09-10得票数 1
3回答
在下面的代码中，我希望带有'y‘的div与3’x‘的div的高度相匹配。<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid; padding: 5px; background-color: rgb(30, 23, 22); width:
浏览 0提问于2009-05-17得票数 9
回答已采纳
我有一个tableView和一个定制的原型cell。这个cell有三个labels (标题、价格、细节)，每个labels使用CoreData加载文本，因此它们的高度不是恒定的。heightForRow atIndexPath是在cellForRow atIndexPath之前执行的，所以我只能为所有的单元格设置一个高度。但我需要它们都有不同的尺寸。我试过的是在cellForRow atIndexPath，我得到了所有标签的<
浏览 2提问于2017-01-28得票数 0
回答已采纳
我有一个包含元素的div，其中的display设置为inline-block。这些包含的元素具有不同的高度。根据div中元素的高度，div中的结果行具有不同的高度。这就是我想要的。有没有一种方法可以在不使所有行的高度相同并且不修改所包含的元
浏览 0提问于2012-07-30得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
