方法一：

<!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 class="right">

sfds

<p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p>

<p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p>

</div>

</div>

</body>

</html>

方法二：

<!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>无标题文档</title>

<style>

#main{width:300px;position:relative;}

#div1{width:140px;border-right:1px solid #ccc;}

#div2{width:140px;border:1px solid #ccc;height:100%;right:0px;top:0px;position:absolute;}

</style>

</head>

<body>

<div id="main">

  <div id="div1">111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>222<br/>222<br/>222<br/>222</div>

  <div id="div2">2222</div>

</div>

</body>

</html>

方法三：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#main{width:220px;height:300px;border:1px solid black;display:flex;}

#main div{flex:1;}

</style>

</head>

<body>

<div id="main">

  <div style="background-color:coral;">红色</div>

  <div style="background-color:lightblue;">蓝色</div>

  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>

</div>

<p><b>注意：</b>Safari 不支持 flex 属性。</p>

</body>

</html>

相邻div实现一个跟着另一个自适应高度示例代码的更多相关文章

  1. textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  2. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

  3. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  4. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  5. js实现iframe自适应高度

    转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...

  6. iframe自适应高度的多种方法方法小结

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的  不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...

  7. iframe自适应高度的多种方法方法小结（转）

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...

  8. iframe内容自适应高度

    一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe ...

  9. MiniUi遇到的一个Bug或者说坑,以div里面的内容自适应高度

    页面源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

随机推荐

  1. C++重载覆盖隐藏

    写一个程序,各写出重载覆盖 1 // // main.cpp // 2013-7-17作业2 // // Created by 丁小未 on 13-7-17. // Copyright (c) 201 ...

  2. objective-c常用方法列表(总结)

    第1章 Objective-C学习环境准备 1.1 Objective-C基础 1.1.1 Objective-C的发展历程 1.1.2 Objective-C语言的特点 1.1.3 技术架构 1.2 ...

  3. 驱动中获取PsActiveProcessHead变量地址的五种方法也可以获取KdpDebuggerDataListHead

    PsActiveProcessHead的定义: 在windows系统中,所有的活动进程都是连在一起的,构成一个双链表,表头是全局变量PsActiveProcessHead,当一个进程被创建时,其Act ...

  4. java判断字符串是否为数字或中文或字母

     个人认为最好的方法 *各种字符的unicode编码的范围:     * 汉字:[0x4e00,0x9fa5](或十进制[19968,40869])     * 数字:[0x30,0x39](或十进制 ...

  5. Java Math floor round ceil 函数

    public final class Math extends Object public static double floor(double a) public static long round ...

  6. Css3 提示框

    <div class="arrow_box"><span>xxy is a so cool boy</span></div> css ...

  7. 《DSP using MATLAB》示例Example4.15

    代码: b = [1/3, 1/3, 1/3]; a = [1, -0.95, 0.9025]; % x(n) y(n) coefficient [R, p, C] = residuez(b,a) M ...

  8. DOM--4 响应用户操作和事件（2）

    自定义事件 //旧的方法 //创建 var event = document.createEvent('Event'); //初始化 event.initEvent('build', true, tr ...

  9. Herding

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  10. 【转】win8.1下安装ubuntu

    参考:http://jingyan.baidu.com/article/14bd256e0ca52ebb6d26129c.html Ubuntu 系统是一款优秀的.基于GNU/Linux 的平台的桌面 ...