CSS设置两个div高度相同|极客教程

CSS设置两个div高度相同

在网页布局中，我们经常会遇到需要将两个div元素的高度设置为相同的情况。这种情况可能出现在需要将两栏内容对齐的情况下，或者是为了使页面更加美观。在实现这一需求时，我们可以利用CSS来轻松实现。

方法一：Flex布局

Flex布局是一种现代的布局方式，可以非常方便地实现各种布局需求，包括设置多个元素的高度相同。下面是使用Flex布局来实现两个div高度相同的示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
        }

        .item {
            flex: 1;
            background-color: lightblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
        <div class="item">
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</body>
</html>

在上面的代码中，我们使用了Flex布局将两个div元素包裹在一个容器中，并为每个div元素添加了.item类。通过设置.item的flex属性为1，使两个div元素平分容器的空间，从而实现了它们的高度相同。

方法二：Table布局

除了使用Flex布局，我们还可以使用Table布局来实现两个div高度相同的效果。Table布局虽然不如Flex布局那样灵活，但在一些特定情况下仍然可以派上用场。下面是使用Table布局来实现两个div高度相同的示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: table;
            width: 100%;
        }

        .item {
            display: table-cell;
            background-color: lightblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
        <div class="item">
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</body>
</html>

在上面的代码中，我们将包裹两个div元素的容器的display属性设置为table，将每个div元素的display属性设置为table-cell。这样就可以使两个div元素的高度相同，并且它们会根据内容自动调整高度。

方法三：等高列布局

等高列布局是另一种常见的方法，通过设置多个元素的高度相同来实现整体布局的对齐。下面是使用等高列布局来实现两个div高度相同的示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
        }

        .item {
            background-color: lightblue;
            border: 1px solid black;
        }

        .item + .item {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
        <div class="item">
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</body>
</html>

在上面的代码中，我们使用了Flex布局将两个div元素包裹在一个容器中，并通过设置.item + .item选择器来实现两个div元素之间的间距。这样就可以轻松实现两个div元素的高度相同效果。

通过以上三种方法，我们可以很方便地实现两个div元素的高度相同布局。具体使用哪种方法取决于具体情况，灵活运用不同的布局方式可以使页面布局更加灵活美观。