两个div高度自动对齐

最新推荐文章于 2023-09-26 15:12:16 发布
最新推荐文章于 2023-09-26 15:12:16 发布
阅读量2.9k 收藏
点赞数
文章标签： div class float html border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/justsoloving/article/details/5742078
版权
通过CSS样式设置，使用浮动布局和负margin配合padding来确保两个div不论内容多少，都能保持高度一致，实现内容对齐的效果。具体代码中，wrap类设置了容器样式，left和right类分别定义了左右div的样式。
摘要由CSDN通过智能技术生成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>new document</title>
    <style type="text/css">
    .wrap{
        border:1px solid #006699; width:500px; overflow:hidden;
    }
    .wrap .left{
        float:left; width:50%; background:#eee; padding-bottom:3000px; margin-bottom:-3000px;
    }
    .wrap .right{
        float:right; width:50%; background:#f5f6fb; padding-bottom:3000px; margin-bottom:-3000px;
    }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        <p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p>
    </div>
    <div c

最低0.47元/天 解锁文章
justsoloving
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS技巧一：多栏/多列DIV高度自动对齐（将较短的栏高度自动拉长）
walleyekneel的专栏
02-13 491
主要原理： 1、两栏或者多栏放置于父窗口（这个是多栏必备的，有点废话） 2、 父容器overflow: hidden（这一条，在IE6和IE7上作用不明显） 3、两栏使用padding-bottom和margin-bottom一正一负相抵，拉抻比较短的那一栏。 示例代码： New Document #wrap{ overflow: hidden; ...
css 两栏高度自动相等,div布局两列高度自动对齐
weixin_32112607的博客
08-04 957
前几天有朋友问我用div+css布局的时候怎么保证左右两列高度一致。今天刚做完的promotion项目也有这个情况。于是抽空把它写了一下，大家一起交流。都知道如果不定高度，那么div的高度是随着内容的变化而变化的。最简单的两列布局下，我们用div写一个简单的框架：#left{background:#ffcc00; float:left; width:100px;padding:7px;}#righ...
多个div float，如何让div的高度自动对齐
blacksource的专栏
12-30 4146
一行排三个div 如何让同一行的DIV高度会跟内容最多的div高度保持同一高度 div{float:left;} 内容多 内容少 内容多 内容多多 内容少少 内容少 解决方法，在所有div外面套个div，然后把overflow设置为hidden，并对内部div设置margin-bottom:-10000px;padding-bottom:10000px; #main{
DIV布局-DIV高度不同自动换行并对齐《转》
weixin_30642029的博客
07-06 608
每个div框内容有多有少，要支持div高度自适应，还要添加的div自动追加，并且换行还要保持每行对齐。 刚开始的效果： 给出了完美解决方案： 效果： 因为要支持每个div可删除，删除后，后面的div自动补齐，所以用table不显示（除非想自虐的人可以试下） 最终就是css修改了一下就搞定了。。。 1 <html> 2 <head> 3...
如何让两个同等高度的div自动对齐
01-10 230
最近在工作中碰到一个需求： 有左右2个并列的div，2个div都不能限定高度。左div为导航，右div为内容。如何能让左div块自动获得和右div块相等的高度？ 同时，也有网友提问到“如果右块高度比左块低，会不会导致左块的内容被溢出不显示之类的问题。应该是取左右2者的最高值吧来对齐吧”。 的确应该是哪个div Height值大，就将其值赋给Height值小的div，从而使2个d...
JQ控制两DIV高度自动相等
03-21
"JQ控制两DIV高度自动相等"这个话题就是关于如何使用JavaScript库jQuery来实现这一功能。这里我们将深入探讨如何实现这个效果，以及涉及到的相关知识点。 首先，我们有两个主要的HTML元素，即两个`div`，它们的初始...
两个div在同一行且不换行的两种方法
09-25
在网页布局设计中，将两个`div`元素放置在同一行并避免它们自动换行是一项常见的需求。这通常涉及到CSS（层叠样式表）中的布局技术。以下是对标题和描述中所述知识点的详细解释： ### 方法一：使用浮动（Float） *...
Div自动滚动到末尾的代码
09-06
// 插入数据到新行（这里假设每行有两个单元格） var cell1 = newRow.insertCell(0); cell1.innerHTML = data.cell1Content; var cell2 = newRow.insertCell(1); cell2.innerHTML = data.cell2Content; // 将...
两个DIV同一行显示
08-28
在网页设计与开发中，如何让两个或多个`<div>`元素在同一行显示是一个常见的需求。这涉及到CSS（层叠样式表）的布局控制技术，是前端开发的基础技能之一。根据给定的文件信息，我们可以深入探讨这一主题，了解如何...
相邻div实现一个跟着另一个自适应高度示例代码
09-25
本示例代码提供了一种方法，使得左右两个相邻的`div`元素能够根据各自的内容自动调整高度，保持水平对齐。这个技巧被称为“负边距填充法”。 首先，我们来解析这段代码的关键部分： 1. **包裹容器 `.wrap`**： - ...
实现两个div水平对齐
最新发布
聆听。。花开雨落的博客
09-26 1397
要实现两个div水平对齐，可以使用CSS中的flex布局。在这个例子中，我们创建了一个容器div，里面包含两个box div。使用flex布局可以让容器中的元素水平排列，并且通过设置每个元素的宽度为50%，可以使两个div在水平方向上占据相等的空间，从而实现对齐。
如何实现<div>中元素上下对齐
若先设计
09-09 9694
产品展示 要实现的功能就是将“产品展示”进行在div中进行上下居中对齐，解决的办法就是使用line-height属性，但是在使用line-height属性之前，首先要给父类的加上height属性，这是实现上下居中对齐的前提，设置好height属性后，此时的line-height的值就是等于谷类的height属性值。 也就是通过height和line-height两个属性值就设置好了上下对齐
DIV嵌套过程中的高度自适应问题
转错的弯，走错的路
12-19 7724
对于很多网站制作的新手朋友来说，学习DIV+CSS是必不可少的。站长在一些上海网站制作论坛以及QQ群里面，还有百度问答里面，看到很多朋友在问嵌套DIV的很多问题，比如嵌套DIV 高度自适应的问题，我们也看过很多这样的实现方式，比如很多论坛或者百度问答说到用JS程序实现，可能对很多网站制作的新手朋友来说看起来有些费脑筋，今天说两个最最简单的实现方法，大家一看就知道了。 第一种：巧用底层DIV实
css如何让两个div上下排列_如何讲清楚Flex弹性盒模型？(上)
热门推荐
weixin_39600331的博客
11-21 3万+
一、什么是Flex弹性盒？Flex弹性盒，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当一个元素 display:flex 的时候，内部元素float会失效，vertical-align也会失效因此我们至少能确定一点，flex替代了浮动的解决方案。我们来看一下它的基本特点。在flex容器当中，div这样的块元素不再独占一行而是自动排成一行。这个效果虽然和浮动很像, 但是请记住, 在fle...
CSS使两个不同的div居中对齐的三种解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
09-02 2701
Flexbox是一个用于创建灵活布局的CSS3模块。使用Flexbox，可以很容易地对元素进行居中对齐。CSS Grid是另一个用于创建二维布局的CSS3模块。使用Grid，也可以轻松地对元素进行居中对齐。在CSS中，有多种方法可以让两个不同的div居中对齐，包括相对定位和绝对定位。以上三种方法都可以实现两个不同的div在页面中居中对齐，你可以根据具体情况选择最适合你的方法。如果你使用的是相对定位和绝对定位，你也可以使用。属性来实现居中对齐。
css如何让两个div上下排列_【CSS】避坑总结
weixin_39630106的博客
11-20 5054
mark下，自己在学习CSS过程的点滴细节心得体会：1、不要用通配符*当多个CSS属性层叠在一起时会产生意想不到的隐患问题。比如：不要写*{margin: 0;padding: 0;}，而是body, h1, h2...{margin: 0;padding: 0;}2、不要轻易用float会破坏文档流结构，用了float一定要记得清除浮动效果，给父容器设置overflow: hidden。3、并不...
多个div左对齐float时，高度自动对齐或匹配
99guo的专栏
01-12 1万+
多个div左对齐float时，高度自动对齐或匹配：     div { border :solid 1px red; } #main{overflow:hidden;zoom:1;} #left,#right{margin-bottom:-10000px;padding-bottom:10000px; float:left;}     测试 测试 测试 测试 测试
flex布局两行垂直两端对齐
07-22
要实现Flex布局中两行垂直两端对齐的效果，可以使用以下步骤： 1. 创建一个父容器，设置其为Flex容器，并使用flex-direction属性将其设置为纵向排列。例如：`flex-direction: column;` 2. 设置父容器的高度，以适应内容的垂直排列。例如：`height: 100%;` 3. 将子元素放置在父容器中，设置子元素的flex属性为1，以使其自动填充剩余空间。例如：`flex: 1;` 4. 使用align-items属性设置子元素在纵向方向上的对齐方式。要实现两端对齐效果，可以设置为`align-items: space-between;` 下面是一个示例的HTML和CSS代码，演示了如何实现两行垂直两端对齐的Flex布局： ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div> ``` ```css .container { display: flex; flex-direction: column; height: 100%; align-items: space-between; } .item { flex: 1; } ``` 通过以上代码，你可以实现两行垂直两端对齐的Flex布局效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值