• 微信
当前位置:首页 > 学无止境 > Web前端

两列DIV高度自适应方法汇总

作者:杨青青 时间:2012-12-10 阅读数:人阅读

网站优化(seo)中,提到过网站样式的优化,即在网站的布局设计中,采用DIV+CSS来布局。网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度(事先并不能确定哪列的高度)的相同,有以下几种方法(方法来源来互联网):

1、JS实现(判断2个div高);

2、纯css方法;

3、加背景图片实现。

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>DIV+CSS左右两列自适应高度的方法-HTMer</title>

<style type="text/css">

.main{500px;overflow:hidden;}

.left{width:100px;background-color:#0CC;margin-bottom:-9999px;padding-bottom:9999px;float:left;}

.right{width:400px;background-color:#F00;float:left;}

</style>

</head>

<body>

<div class="main">

    <div class="left">左侧内容1</div>

    <div class="right">右侧内容1<br />右侧内容2<br />右侧内容3</div>

</div>

</body>

</html>

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:dacesmiling@qq.com

微信

杨青青

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

微信
阿里云