三列等高布局实现

最新推荐文章于 2021-02-02 00:13:29 发布

VIP文章溪宁

最新推荐文章于 2021-02-02 00:13:29 发布

阅读量849

点赞数

分类专栏：前端学习文章标签： css 前端

本文链接：https://blog.csdn.net/qq_38164763/article/details/95921743

版权

一、前言

三列等高布局可能是我们平时开发中用的比较多的布局, 因为有时为了美观必须让三列等高, 但是我们的div又是被内容撑开的, 不能提前设置高度, 这时候就需要我们利用一些骚操作。不过在flex布局出来以后, 这个问题就变得很简单了, 我们后面再介绍。

二、margin+padding实现

首先我们先来看一下最后的效果:
在这里插入图片描述
左边两列都会自动和第三列对齐, 下面我们一步步来实现。
首先很自然的, 既然要三个div并列, 我们先给他设置float:left, 并分别给他们一定的宽度和不同的背景色, 但是我们不给他们高度，因为要靠内容撑开。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .one {
    
            float: left;
            width: 30%;
            background-color: red;
        }
        .two {
    
            float: left;
            width: 30%;
            background-color: blue;
        }
        .three {
    
            float: left;
            width: 40%;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="one">
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
    </div>
    <div class="two">
        <p>wjaeifojawi</p>
    </div>
    <div class="three">
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>
        <p>fwefwe</p>

最低0.47元/天解锁文章

溪宁

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三列等高布局实现

前言三列等高布局可能是我们平时开发中用的比较多的布局, 因为有时为了美观必须让三列等高, 但是我们的div又是被内容撑开的, 不能提前设置高度, 这时候就需要我们利用一些骚操作。不过在flex布局出来以后, 这个问题就变得很简单了, 我们后面再介绍。margin+padding实现首先我们先来看一下最后的效果: 左边两列都会自动和第三列对齐, 下面我们一步步来实现。首先很...
复制链接

扫一扫