0顶

并排2列DIV高度自适应的方法

稿源：互联网 2022-04-02 21:40:19 点击： 2265 撤稿纠错

不用js,不用padding、margin折合的方式，纯div+css布局实现的方法...

以下讨论的是和自适应相关的并排2列DIV高度自适应的方法教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿里西西_网页特效演示页_test</title>
<style>
*,html,body{ height:100%; line-height:23px;}
body{ height:80%}
p{ height:auto;}
.main{width:960px; height:auto; margin:0 auto; background:#CCCCFF; padding:30px; height:100%; overflow:hidden;}
.left{ width:400px; float:left; background:#996666; border:1px solid #FF0000; height:100%;overflow:hidden;}
.right{width:400px; float:right; background:#669966; border:1px solid #9900FF;height:100%;overflow:hidden;}
</style>
</head>
<body>
<div class="main">
   <div class="left">阿里西西_网页特效演示页</div>
   <div class="right"><p>阿里西西_http://js.alixixi.com</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p></div>
</div>
</body>
</html>

关于并排2列DIV高度自适应的方法的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011022667919.shtml方便下次再访问哦。

·上一篇： 用CSS使图片上下左右都绝对居中于DIV的特效代码
·下一篇： 原生JavaScript分页控件PagerView

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

并排2列DIV高度自适应的方法

文章分类LIST >>返回首页

最新游戏

最新新闻