使用CSS将一行div设置为相同的高度
在CSS中，要将一行div设置为相同的高度，可以使用Flexbox布局。Flexbox是一种现代的、强大的布局方式，可以让你更容易地创建响应式和动态布局。以下是如何使用Flexbox将一行div设置为相同的高度的步骤：
- 首先，在HTML文件中创建一个包含多个div的容器。
<div class="container">
<div class="box">内容1</div>
<div class="box">内容2</div>
<div class="box">内容3</div>
</div>- 接下来，在CSS文件中，为容器添加
display: flex属性，这将使容器中的所有子元素成为Flex子项。
.container {
display: flex;
}- 为了确保所有div具有相同的高度，可以在CSS中为
.box类添加align-items: stretch属性。这将使所有子项在垂直方向上拉伸以填充容器的高度。
.container {
display: flex;
align-items: stretch;
}现在，所有div将具有相同的高度，无论它们的内容如何。这是一个完整的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container { display: flex; align-items: stretch;}.box { border: 1px solid black; padding: 20px; margin: 10px;}</style>
</head>
<body>
<div class="container">
<div class="box">内容1</div><div class="box">内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2相关·内容
1回答
所以我一直在搜索，试图弄清楚如何让父div的高度等于它最大的子div的高度，同时使子div的最大高度相同，并在所有子div上强制水平垂直中心，其中可能包含图像。简而言之，使用具有两列和一行的表的结果，并且align和valign设置为中心。<div c
浏览 3提问于2013-03-15得票数 0
回答已采纳
在一个bootstrap webshop模板上，im将项目列出到col 3div中。如何将这些div设置为相同的高度？如果项目名称太短或太长，或者是价格，则只显示正常价格，每个div高度较小，并且它们不在一行中。有没有解决这个问题的jquery插件？或者css？而且我只想在用户设备不是移动设备的情况下这样做。
浏览 17提问于2016-07-23得票数 0
回答已采纳
1回答
该块具有以下css float: left;}<div class="wrapper"> <div ng-show="condition2" class="block
浏览 3提问于2017-02-09得票数 3
回答已采纳
在Flex中，有一个名为VGroup的容器组件，它可以垂直布局它的内容。在HTML中，下列内容的等价物是什么： <button height="50" width="20"/></VGroup>
对于超文本标
浏览 0提问于2013-05-21得票数 0
回答已采纳
我有以下div元素，它在页面加载时接收min-height。<div id="main_div" style="min-height: 2000px">但是，我在同一页上有一个选择框，并且它的onChange事件是在main_div div元素中加载其他内容现在的问题是，min-height总是设置为2000px，而且我不知道当
浏览 3提问于2014-04-22得票数 0
回答已采纳
我有一行必须都是相同高度的div，但我无法提前知道高度可能是多少(内容来自外部来源)。我最初尝试将div放在一个封闭的div中，然后将它们放在左边。然后我将它们的高度设置为"100%"，但这没有明显的效果。通过将封闭div上的高度
浏览 0提问于2008-12-16得票数 5
3回答
我已经搜索过了，但找不到我想要实现的东西，在CSS中，我不确定是否有jQuery脚本可以帮助我。我想在我的网站上创建一个div，填充整个页面的高度(不超过滚动条下面的区域，只是垂直填充的屏幕的第一个区域)。我想让它适应设备的高度，比如在桌面和iPhone上，整个屏幕的垂直高度都是填充的。我不确定我是否可以发布网站，但这就是我想要的
浏览 2提问于2014-06-12得票数 1
在弄清楚如何让表格单元格内嵌套的DIVs根据表格行的高度达到100%的大小后，我注意到它在Firefox或IE中不起作用。这里不是试图解释，而是这个页面：我试图让每一行中的所有单元格都扩展到该行的高度，这取决于它的内容。如果一行有非常小的描述，那么它的高度可能比具有长描述的行短。你会注意到在FF或IE中我希望纠正的行
浏览 0提问于2013-05-22得票数 0
回答已采纳
1回答
在所有项目之间有一定空隙的任意数量的行的最动态的方式是什么？现在，对我来说唯一有效的方法是将每个项目包装在一个包装器中，将flex基础设置为包装器，并设置为子包装的页边距。这方面的问题是，我失去了拥有行中最高内容的相同高度的每一行的能力。
这很好，因为内
浏览 1提问于2017-07-04得票数 10
回答已采纳
我创建了这个页面结构：
<div class="content-container group container-fluid"> <div class="col-md-5 mapContainer">
<!--
浏览 0提问于2016-04-08得票数 1
4回答
如果您看到以下jsfiddle，则没有文本的div a元素出现在与有文本的元素不同的级别上。CSS有没有一种方法可以让这些出现在一行中，而不管是否存在文本？(没有更改标记)。我将链接元素设置为block，以便在某些链接文本为空时它们的高度相同
浏览 0提问于2011-09-06得票数 0
回答已采纳
7回答
我不能让我的柱子有相同的高度。我只是想让这些列具有相同的高度。>#left-column { width: 25%; border-right: 1px solid#cdcdcd;#right-column { margin-left: 25%;我遇到的问题是，因为每个div<
浏览 0提问于2016-11-29得票数 3
4回答
我正在创建一个虚拟商店，在这里主页面显示产品，这是产品细节中的信息量不同的地方，块开始变形。如何保持大小不变，在任何情况下文本都被截断？我正在使用MVC 5和Bootstrap。 </div>
浏览 4提问于2017-01-25得票数 0
回答已采纳
我遇到了一个问题，试图根据坐在jQuery旁边的div的高度来设置div的高度。基本上，我有两个div，我希望它们都是相同的高度。左边的div将在高度上发生变化，并且在CSS/HTML中没有设置height元素。右边的div也可以改变高度<
浏览 0提问于2012-08-08得票数 2
回答已采纳
3回答
我在应用程序中使用Gridstack.js框架，并有一些div列：<div class="cont"></div>我将第一分区的高度设置为与Gri
浏览 0提问于2017-07-18得票数 1
回答已采纳
我正在寻找一些帮助，以尝试以特定格式显示我的表格数据：---------------------------------------------------------------------------------
标准的xhtml似乎不能以这种方式显示它-行似乎是交叉的，而不是向下的-就像在中一样，列数水平增加而不是垂直增加。它不一定非得是表
浏览 0提问于2013-09-19得票数 0
我已经阅读了所有关于这个问题的stackoverflow帖子，但它们的宽度都有固定数量的列或div(除非我错过了)。我编写了一些javascript/jquery来检查最高的瓦片，然后将所有瓦片设置为相同的高度。如果有人知道一种方法，将
浏览 0提问于2017-09-03得票数 0
在CSS中，我可以排列内联块的高度吗？ margin: 0em; height: auto;}
我希望两个框的高度相同，但希望d
浏览 1提问于2012-06-24得票数 29
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
