如何用css实现两列布局?

作者：花生_TL007 | 2024-06-12 10:09:48

踩

如何用css实现两列布局?

1. 两列布局的基本方法

实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、Flexbox和Grid布局。

方法一：使用浮动（Float）

浮动是一种早期的布局方式，虽然现在不推荐，但仍然有必要了解。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Column Layout using Float</title>
    <style>
        .container {
            width: 100%;
        }
        .left-column {
            float: left;
            width: 50%;
            background-color: lightblue;
            height: 300px; /* for demonstration */
        }
        .right-column {
            float: left;
            width: 50%;
            background-color: lightgreen;
            height: 300px; /* for demonstration */
        }
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="left-column">Left Column</div>
        <div class="right-column">Right Column</div>
    </div>
</body>
</html>

关键点：

float: left; 用于将列浮动到左侧。
.clearfix::after 伪元素用于清除浮动，防止父容器高度塌陷。

方法二：使用Flexbox

Flexbox是一个强大而现代的布局方式，非常适合实现响应式布局。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Column Layout using Flexbox</title>
    <style>
        .container {
            display: flex;
        }
        .left-column {
            flex: 1;
            background-color: lightblue;
            height: 300px; /* for demonstration */
        }
        .right-column {
            flex: 1;
            background-color: lightgreen;
            height: 300px; /* for demonstration */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-column">Left Column</div>
        <div class="right-column">Right Column</div>
    </div>
</body>
</html>

关键点：

display: flex; 用于将父容器设为Flex容器。
flex: 1; 确保两列等宽。

方法三：使用Grid布局

Grid布局是CSS中最强大的布局系统之一，尤其适合复杂的网格布局。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Column Layout using Grid</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .left-column {
            background-color: lightblue;
            height: 300px; /* for demonstration */
        }
        .right-column {
            background-color: lightgreen;
            height: 300px; /* for demonstration */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-column">Left Column</div>
        <div class="right-column">Right Column</div>
    </div>
</body>
</html>

关键点：

display: grid; 用于将父容器设为Grid容器。
grid-template-columns: 1fr 1fr; 用于定义两个等宽的列。

2. 响应式设计

无论使用哪种布局方式，都要考虑响应式设计，以确保布局在各种设备上都能良好展示。

使用媒体查询

例如，使用Flexbox实现响应式设计：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Two Column Layout</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .left-column, .right-column {
            flex: 1 1 50%;
            background-color: lightblue;
            height: 300px; /* for demonstration */
            box-sizing: border-box;
        }
        .right-column {
            background-color: lightgreen;
        }
        @media (max-width: 768px) {
            .left-column, .right-column {
                flex: 1 1 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-column">Left Column</div>
        <div class="right-column">Right Column</div>
    </div>
</body>
</html>

关键点：

flex-wrap: wrap; 确保列在小屏幕上换行。
媒体查询调整列宽度。

3. 实际应用中的技巧

垂直对齐：使用Flexbox的align-items属性或Grid的align-content属性实现。
间距控制：使用Flexbox的gap属性或Grid的grid-gap属性。
兼容性：虽然现代浏览器都支持Flexbox和Grid，但在实际项目中要考虑到部分老旧浏览器的兼容性，可以使用前缀或Polyfill。

1. 只能想到vuetify中的网格布局，如果需要居左居右还不知如何处理。

2.通过给两列都设置float:left属性和宽度就可以实现两列布局，还要设置伪元素清除浮动；通过给容器设置flex布局，然后每一列设置flex:1，就可以实现两列等宽；通过给容器设置display: grid和grid-template-columns: 1fr 1fr，就可以实现等宽两列布局，这种是只在容器设置即可。

3. /

4. 多总结即可，容易忘。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/707646