css DIV三列高度自适应

 代码如下 复制代码

 

<!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>css DIV三列高度自适应</title>
<style type="text/css">
*{padding:0;margin:0;}.main .box{float:left;width:300px;background-color:#FFF;margin-top:8px;margin-bottom:-2000px;margin-left:8px;display:inline;border:1px solid #999;padding-right:8px;padding-left:8px;padding-bottom:2000px;padding-top:8px;}.main{background-color:#CCC;overflow:hidden;width:986px;margin-right:auto;margin-left:auto;position:relative;}.main_bottom{background-color:#CCC;height:8px;width:986px;margin-right:auto;margin-left:auto;overflow:hidden;}.main .box .bottom_line{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:8px;display:inline;overflow:hidden;}.main .box .bottom_line2{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:334px;display:inline;overflow:hidden;}.main .box .bottom_line3{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:660px;display:inline;overflow:hidden;}</style>
</head>
<body>
<div class="main">
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <div class="bottom_line"></div>
  </div>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <div class="bottom_line2"></div>
  </div>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <div class="bottom_line3"></div>
  </div>
</div>
<div class="main_bottom"></div>
</body>
</html>
时间： 2024-08-31 06:48:29

css DIV三列高度自适应的相关文章

css实现div两列高度自适应实例介绍

方法一: 纯CSS实现高度自适应:  代码如下 复制代码 .content{ overflow:hidden; } .left, .center, .right{ padding-bottom:500px; margin-bottom:-500px;}   方法二: 以下JS代码添加到</body>结束之前:  代码如下 复制代码 <script type="text/javascript"> <!– var l=document.getElementBy

div+css横向三栏布局自适应宽度示例

div+css横向三栏布局自适应宽度示例以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

div布局，上中下结构，怎么让高度固定的div始终在高度自适应的div下面

问题描述 div布局,上中下结构,怎么让高度固定的div始终在高度自适应的div下面 我做了一个页面布局为上中下,上面和下面的高度都是固定的,中间的高度是自适应的,下面那个div要怎么设置才能紧挨着中间的那个div我写的都跑到上面去了 解决方案 试试,下面的用下边距0固定 解决方案二: 贴出具体代码看看吧. 解决方案三: 正常就是上中下,除非你设置其他样式了. <div style=""height:100px"">上面</div> <

解决div列高度自适应的三种最常用的方法

解决div列高度自适的方法有很多种,这里介绍三种最常用的方法给大家(下面所有例子以父main,子divleft.divright为例). 1.利用"clear:both"背景填充(推荐!!!) 这是使用最广泛的一种做法,我一直都用此方法解决div列高度自适问题.三行二列布局,主要内容在右边,网页宽度780px,左列240px,右列540px. CSS代码: #main{width: 780px;margin: 0;background: url(bg.gif) #FFFFFF repe

css+div三栏布局 左右固定宽 中间自适应

三栏布局,这是一种相对比较常见的页面布局,这里提供2种实现方法: 方法1: 使用最新的css3伸缩盒布局属性,可轻松实现(三栏等高,默认就是三栏等高哟!)  代码如下 复制代码 <style>     .header,.footer{height: 100px;line-height: 40px;font-weight: bold;background-color:     #bbb;text-align: center;} .main{} .content{overflow: hidden;

解决列高度自适应(列高度相同)的五种方法

解决|自适应 1.背景图填充这是使用最广泛的一种做法,无hacks,推荐使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta

解决列高度自适应(相同)的五种方法_经验交流

1.背景图填充 这是使用最广泛的一种做法,无hacks,推荐使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

css实现二列宽度自适应实例

从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值:  代码如下 复制代码 #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 20%; } #right { bac

CSS中 浮动float 高度自适应

先来看一个示例效果的对比: 这是清除浮动之前的效果.可以明显看到column1,column2,column3这三个浮动元素的父级元素的高度并没有被撑开. 这就是我们所要达到的效果,可通过下面的三种方法来实现. 方法一: 在浮动层最后一个浮动元素的后面多加一个元素来清除浮动即可,这是最简单也是最直接的方法.唯一的缺点就是在一定程度上改变了文档流结构. html代码:    代码如下 复制代码 <div id="demo"> <div id="c1"