css实现内容不相同的左右两个div等高

问题提出

现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢?

下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来。

方法一

通过父元素设置 overflow:hidden, div自己设置padding-bottommargin-bottom来实现。

<div id="#warp">
    <div class="left">
        <br>
        <br>
        <br>
        left
    </div>
    <div class="right">right</div>
</div>
#wrap {
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
}
#left,
#center {
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}
#left {
    float: left;
    width: 250px;
    background: #00ffff;
}
#center {
    float: left;
    width: 500px;
    background: #ff0000;
}

方法二

使用 table-cell

.left,
.right {
    padding: 10px;
    display: table-cell;
    border: 1px solid #f40;
}

方法三

父元素使用 display: box;

.wrap {
    display: -webkit-box;
}
.left,
.right {
    padding: 10px;
    border: 1px solid #f40;
}

效果如下图:

参考链接

https://www.cnblogs.com/cbza/p/7145384.html

原文地址:https://www.cnblogs.com/lvonve/p/11344894.html

时间: 2024-10-16 00:56:21

css实现内容不相同的左右两个div等高的相关文章

如何实现两个div等高效果

如何实现两个div等高效果:在网页实际应用中,可能需要动态的实现两个div的等高效果,当然不仅限于div,例如一个网页分为左右两栏,一栏的高度可能需要根据内容自适应,也就是说高度不是固定的,而另一栏需要和它保持高度一致,那么就需要动态的设置高度.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse

布局两列div等高方法

一.左右布局,左侧div绝对定位,外div相对定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 *{margin:0;paddi

css如何实现让两个div在同一行排列

css如何实现让两个div在同一行排列:让两个div元素在同一行排列是基本的操作,实现也非常的简单,可能会对初学者有所帮助.一.使用功能浮动方式:代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

CSS如何实现段落首字符缩进两个字符效果

CSS如何实现段落首字符缩进两个字符效果:段落首行第一字符缩进是组织语言的尝试,当然使用空格 也可以实现此效果,不过这样就略显粗傻,下面就介绍一下使用text-indent属性实现此效果,关于text-indent属性可以i参阅CSS的text-indent属性一章节.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="auth

css基础内容

css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 一.css的引入方式 1.直接在html标签元素内嵌入css样式 <div style="font-size:14px; color:#FF0000;">行内引入</div&g

Jquery 动态交换两个div位置并添加Css动画效果

前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子元素. 今天将给大家介绍一种位置交换方式(判断兄弟元素是否存在),并添加简单的css效果. 设计思路 判断元素后边是否存在兄弟元素:存在则通过insertBefore方法将另一元素添加至其兄弟元素前,否则则直接采用appendTo方法添加至父元素. 核心代码 1.判断其后边是否存在兄弟元素 1 fu

css两个form不换行,两个div并排代码

1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action="left.cgi" name="WEBCAM-TEST"><input type=image src="images/left.jpg"/></form> </td> <td> <form met

使用CSS使内容垂直居中的N中方法。

使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: 1.1绝对定位法: CSS: .middle-div{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } .parent-div{ position:relitive;

使用CSS使内容垂直居中的N中方法

用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: 1.1绝对定位法: CSS: .middle-div{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } .parent-div{ position:relitive;