文章/答案/技术大牛

发布

css两列等高布局

CSS两列等高布局基础概念

CSS两列等高布局是指在网页设计中，使两个并排的列具有相同的高度，即使它们的内容长度不同。这种布局方式可以提高网页的美观性和一致性。

类型

Flexbox布局：使用CSS Flexbox可以实现简单且灵活的等高布局。
Grid布局：CSS Grid布局提供了更强大的二维布局能力，也可以轻松实现等高布局。
浮动布局：通过浮动和负边距的方式实现等高布局，但这种方法较为复杂且不推荐使用。

应用场景

侧边栏和主要内容：在博客、新闻网站等页面中，侧边栏和主要内容通常需要等高布局。
产品展示：在电商网站中，产品图片和描述通常需要等高布局，以保持页面的一致性。
导航菜单：在复杂的导航菜单中，等高布局可以使菜单项看起来更加整齐。

示例代码（Flexbox）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS两列等高布局</title>
    <style>
        .container {
            display: flex;
        }
        .column {
            flex: 1;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">
            <h2>Column 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="column">
            <h2>Column 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</body>
</html>

示例代码（Grid布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS两列等高布局</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .column {
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">
            <h2>Column 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="column">
            <h2>Column 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</body>
</html>

参考链接

通过以上示例代码和参考链接，你可以更好地理解和实现CSS两列等高布局。

页面内容是否对你有帮助？

有帮助

没帮助

如何让div向下延伸到固定页脚

html、css、height

我希望我的设计的两个部分(见附图)延长整个页面的高度。我试着创建一个提琴，但它就是不能在那里工作，所以。.main { float: left; position: absolute;

浏览 2提问于2013-05-17得票数 10

1回答

如何在Bootstrap3中将一列拆分为两行时获得等高列

jquery、html、css、twitter-bootstrap-3

我需要像上面这样的引导3网格布局，它只是两列，第一列被分割成两行。Col1将保存一些文本，每一行中的列表和Col2将保存一个图像。列必须是等高的--我不能达到相同的高度。我正在使用这个css，它在其他领域很好地工作，以实现列的等高，但是这些列并没有被分割成行。当其中一列在引导3网格中被分割成行时，如何实现等高列？提前谢谢你。

浏览 8提问于2020-02-05得票数 0

2回答

确定动态元件的高度

jquery、css、jsf

我有两栏的页面布局。左列使用dataTable在列表中显示图像，因此div容器的高度是未知的。右边的列是带边框的空div。但是我有一个正确的div容器，它和左边的容器一样高。有办法做到这一点吗？这是我的布局 <h:form> <p:dataTable value="#{myBean.imgageList}" var="item"></

浏览 5提问于2011-04-27得票数 0

回答已采纳

1回答

等高柱按960.gs框架

css、frameworks

有没有css/布局的方法，我们可以通过960. Is有等高的列任何其他建议的解决方案

浏览 1提问于2009-12-02得票数 4

回答已采纳

2回答

Bootstrap两列等高布局

html、css、twitter-bootstrap

我使用的是最新的Bootstrap，并且有一个简单的两列布局。我想用颜色填充右列中包含的div。为了正确地做到这一点，我需要具有与容器相同的高度，但height: 100%不起作用。

浏览 1提问于2015-06-27得票数 1

4回答

使用ng-repeat创建包含两列的表

angularjs、html、twitter-bootstrap、css

我有一个对象数组，我需要在两列布局中显示一些列目前比其他列有更多的数据，所以我需要等高的行。<div class="clearfix" ng-if="$index%2===1"></div> <div ng-repeat-end=""&g

浏览 4提问于2016-05-05得票数 2

2回答

高度相同的两列布局，table还是div？

html、css、html-table

我需要一个有两列的布局，其中每列扩展到更高的列的高度。td class="columnLeft">Column 1</td> </tr>列1和列2将保持相同的可变高度。(jsFiddle地址：) 在这种情况下

浏览 4提问于2012-11-21得票数 1

回答已采纳

7回答

在响应/灵活的布局中实现等高列

javascript、jquery、height

我正试图在一个“响应”网站上实现等高列。我有两个列，需要有相同的高度。，很容易实现时，布局是固定的。因此，如果窗口较小，则列的高度与以前相同，且列的内容溢出。太难看了。注意:由于列中的内容，我不能使用任何带有背景、图像等CSS技巧的。，我真的需要这两列</

浏览 10提问于2011-05-18得票数 4

2回答

重复背景

css

在两列模板中，当两列的高度不同时，如何在每一列上重复使用背景？例如，如果我的第一列的高度是200px (加载一些动态物质后)，第二列的高度是500px，那么第一列的背景是根据200px的高度显示的，第二列的背景是根据500px的高度显示的，但是我希望两列的背景都是

浏览 3提问于2010-12-23得票数 1

回答已采纳

2回答

两列，等高布局-列间间距

css、layout、multiple-columns

我找到了一些代码，可以创建包含页眉和页脚的完美的两列布局。无论内容如何，这两列都完美地向下和向右伸展，这就是我要找的。有没有人能想出一种在不破坏功能的情况下将两者分离的方法？非常感谢！It has</p></div> <div id=&qu

浏览 2提问于2013-04-13得票数 1

1回答

CSS -三个可滚动的等高主要内容列(流体高度)和粘性/始终可见的页脚

html、css

我查看了Google上几乎所有的帖子，似乎找不到我的CSS布局问题的答案：“3个具有‘非常’粘性页脚的等高列”，其布局要求如下：顶部标题部分，其中一行用于下拉菜单选项，另一行用于工具栏按钮。主内容部分，有3列等高列。中间柱有液体宽度，左右柱有固定宽度。所有3列都有流体/可变高度，如果列的内容比列中可用的可见内容区域中的内容更多，则每列将自动显示/使用自己的滚动

浏览 4提问于2011-06-18得票数 5

回答已采纳

2回答

带有锚点的错误负边距

html、css、anchor

我使用负边距-底部来获得具有相同高度的n个DIVs (我使用这个方法：“三列布局-使用纯CSS的相等高度”)div的顶部消失了。这太奇怪了！我错过了什么？

浏览 2提问于2012-05-16得票数 2

回答已采纳

1回答

显示套件中列高度相等的问题

7、views、display-suite

我在展示套房里有流体两列堆叠的布局。第一列中有响应图片，第二列包含一些呈现的字段。在该列下面是长文本。我的问题是右栏。我需要使该列的高度等于左边图片的高度。如何做到这一点？是否有可能在正确的列中添加滚动条？有人遇到过类似的情况吗？一些简单的解决方案，没有编码，或者只有小片段;)也许我需要在正确的列中添加一些视图 📷

浏览 0提问于2014-08-20得票数 1

2回答

如何使特定行中的http://deco.gs/单元格等高？

css

我喜欢 CSS网格系统。我想让实际布局中某一行的单元格高度相等。有谁知道如何实现它吗？我浏览了许多关于如何做等高框/列的文章，但我找不到最适合的文章。-- 十六进制

浏览 3提问于2011-03-12得票数 0

2回答

使用带有引导的css在所有列中等高

html、css、twitter-bootstrap

目前，我在等高列中面临一个大问题，我搜索了，所以和我找到了一个解决方案。在div (行)中应用下面的css，即使在应用下面的css之后，当我在第三列中有5列时，当我在整个页脚中输入更多的数据时，第一列和第二列没有增加，这是没用的。 display: -web

浏览 3提问于2016-03-06得票数 0

1回答

3列CSS等高jQuery解决方案

jquery、height

嘿，我正在用jQuery解决我的等高三列CSS等高布局的问题，因为CSS的变通方法真的给我带来了一些麻烦。我想出了以下代码：但由于某些原因，我看不到任何影响，当我重新加载我的。我想知道是否可以将元素的CSS属性设置为jQuery语句或类似的语句。或者，是因为我的&

浏览 0提问于2010-09-02得票数 1

2回答

响应布局中的CSS等高列

css、responsive-design

我有一个布局()，它使用页眉、页脚和左、主和右内容的3个div。

浏览 5提问于2014-07-13得票数 0

回答已采纳

3回答

使用bootstrap的两列等高布局

javascript、jquery、html、css、twitter-bootstrap

我有两列布局，左侧只有一个图像列和右侧的内容等，现在两者都是相同的高度，如果旋转屏幕，那么它不是相同的高度，但我刷新页面(旋转屏幕)，那么这两列确实具有相同的高度。

浏览 12提问于2017-02-07得票数 0

3回答

用css创建等高两列

html、css、height

我想要创建等高两列，两列右边将后面的高度列左。@import url('http://getbootstrap.com/dist/css/bootstrap.css'); background-color: green

浏览 6提问于2015-03-17得票数 0

回答已采纳

2回答

我记得我第一次开始使用表格作为布局，并了解到我不应该这样做。我正在一个新的网站上工作，如果不使用表格，我似乎无法完成相同高度的列。下面是使用div标记进行尝试的一个示例。，并将其宽度设置为33% (这很好)，我使用了清除:这两个div都是最大列的大小，但根据它们的内容大小，列将是不同的大小。我已经找到了许多修复，其中大部分涉及css黑客，只是让它看起来像它的权利，但这不是我想要的。我曾想过只在javascript中这样做，但对于那些选择禁用javascript的人来说，情况就不一样了。在

浏览 0提问于2011-08-01得票数 2

点击加载更多

css两列等高布局