div并排等高

最新推荐文章于 2022-05-09 22:13:44 发布
最新推荐文章于 2022-05-09 22:13:44 发布
阅读量528 收藏
点赞数
分类专栏： html-css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_37037281/article/details/78884484
版权

利用margin-bottom和padding-bottom

<!DOCTYPE html>
<html>
<head>
    <title>并排等高</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container::after{
            display: block;
            content: "";
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .container{
            overflow: hidden;
        }
        .left, .right{
            width: 100px;
            float: left;
            padding-bottom: 1000px;
            margin-bottom: -1000px;         
        }
        .left{
            background-color: red;

        }
        .right{
            background-color: black;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>
        <div class="right">
            <p>1</p>
        </div>
    </div>
</body>
</html>

设为table-ceil

<!DOCTYPE html>
<html>
<head>
    <title>并排等高</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container::after{
            display: block;
            content: "";
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .container{
        }
        .left, .right{
            width: 100px;
            display: table-cell;        
        }
        .left{
            background-color: red;

        }
        .right{
            background-color: black;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>
        <div class="right">
            <p>1</p>
        </div>
    </div>
</body>
</html>

flex

父级元素设为flex

align-items：stretch也行

UNDERCOVERj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div多列等高处理，实现多个div等高
07-20
假设我们有三个并排的div，可以通过计算最高度div的高度，并将其他两个div的padding-bottom设为相同的负值，使其看起来等高。然而，这种方法需要精确计算，且对动态内容的适应性较差。 3. **Flexbox布局**：随着CSS...
多种方法实现div两列等高（收集整理）
weixin_33883178的博客
01-08 210
HTML骨架 &lt;div id="header"&gt;头部&lt;/div&gt; &lt;div id ="container"&gt; &lt;div class="mainbox"&gt;主内容区域&lt;/div&gt; &lt;div class="sidebox"&gt;侧边栏&amp
div两边等高
w_t_y_y的博客
01-13 3483
现有两个横向排列的div，希望两个div高度保持一致，有以下方法：
两个div一行保持同高度 display:flex
qq_41451744的博客
05-09 3646
描述： 想让两个div在一行展示，然后右边的div高度不定，想让左边的div高度跟随右边高度变化。 1、两个div在一行展示：设置两个div的样式 display: inline; 2、用一个div 包括上面两个div,在父级div中设置样式：display: flex; ...
css两列等高,多种方法实现div两列等高（收集整理）
weixin_28805935的博客
08-03 769
HTML骨架<divid="header">头部div><divid="container"><divclass="mainbox">主内容区域div><divclass="sidebox">侧边栏div>div><divid="footer">页脚div>1.背景模拟(使用背景图片实现等高)：背景模拟主要依...
让并排的两个Div自适应高度（一样高）
liuzp111的专栏
09-30 1万+
需求： 解决办法： 由于设计页面需要，要把两个并排显示的div实现一样高的效果，n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标。方法有以下几种：1、JS实现（判断2个div高）；2、纯css方法；3、加背景图片实现。首先说下本博客实现的2个div一样高的方法（即js方法）。     div+css基本布局：
jquery 实现左右等高
12-18
1. **HTML 结构**：创建基本的 HTML 结构，通常包括两个或多个并排放置的 div 元素，分别代表左侧和右侧的区域。例如： ```html <div class="container"> <div class="left"></div> <div class="right"></div> ...
div+css table布局实现代码
09-27
【div+css table布局实现代码】是一个关于使用CSS模拟HTML表格布局的技术，目的是为了在不使用`<table>`标签的情况下，实现多个容器等高并排显示的效果。这种布局方式常见于网页设计，允许内容在各自容器中居中或...
用div实现像table一样的布局方法
10-30
在网页设计中，有时我们需要创建一个布局，使得多个div元素能像表格（table）一样排列，保持等高并可以灵活地调整内容对齐方式。在HTML中，`<table>`元素是最直接的实现方式，但因为表格布局在某些场景下可能会导致...
css——之三行三列等高布局图文教程
10-30
CSS三行三列等高布局图文教程 本文将详细介绍如何使用CSS实现三行三列等高布局，并提供了详细的图文教程。 一、创建结构 首先，我们需要创建一个基本的HTML结构，包括header、container和footer三个部分。 ```...
CSS多种方法实现div两列等高
01-29
CSS多种方法实现div两列等高布局 ， 前端工程师必备知识，div两列等高
css实现两个div并排等高
热门推荐
笔心
04-03 3万+
方法一 table-cell 代码 运行结果 方法二 css3盒模型 代码 运行结果方法一 table-cell代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .left, .right { padding: 1
Div布局实现Div等高的方法
L_Vincent的专栏
05-20 3393
<br />一、用CSS实现<br /> <br />1、通过父Div的边框模拟子Div的背景实现。<br /> <br /> <%--设置父Div的右边框宽度等于右边Div的宽度--%> <div style="border-right: solid 180px gray;background:black; color: white;"> <div style="width: 180px; float: right; position: relative; r
float 左右布局，左右div等高
wodetiankong516的博客
09-25 2万+
一. 利用背景图，做出左右等高的模拟效果   这种方法不是真正的左右等高，而是在外框元素中添加一张背景图片，当内容增多时，背景会纵向重复，就会形成左右等高的效果。  这种方法不是真正的div自动等高，而是在左右两个div的外面添加一个外框元素，给这个外框元素添加一个背景，当内容增多时，背景就会向下纵向重复，看起来就向左右两个div都自动向下延伸了一样。下面写一下详细代码。 Html代码：
如何让2个并列的div自动等高（不设高度）
mrhaoxiaojun的博客
01-02 4337
1， table：css:*{margin: 0; padding: 0;} table{width: 100%; height: 100%}html:<table border="1"><tr><td colspan="2" style="height:50px; background:#333"></td></tr><tr><td style="width: 50px; background:#
并列div 等高（任何一个变高，其余随之变高）
撸码方为上策
03-17 659
直接上html .wrap{ border: 2px solid red; width: 300px; display: table; } .wrap .child{
vue 两个div并排显示
最新发布
07-08
要在Vue中实现两个div并排显示，可以使用CSS的flexbox来实现。以下是一个示例代码： ```html <div class="container"> <div class="item">Div 1</div> <div class="item">Div 2</div> </div> .container { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值