方法一：

<!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. wordpress源码解析-目录结构-文件调用关系（1）

    学习开源代码,是一种很快的提升自己的学习方法.Wordpress作为一个开源的博客系统,非常优秀,应用广泛,使用起来简单方便,具有丰富的主题和插件,可以按照自己的需求来任意的进行修改.所以就从word ...

  2. 注解：【有连接表的】Hibernate单向1->1关联

    Person与Address关联:单向1->1,[有连接表的] (使用较少!) Person.java package org.crazyit.app.domain; import javax. ...

  3. 六款值得推荐的android（安卓）开源框架简介(转)

    1.volley 项目地址 https://github.com/smanikandan14/Volley-demo (1)  JSON,图像等的异步下载: (2)  网络请求的排序(scheduli ...

  4. WPF RoadMap

    最近ms 更新对WPF支持,http://blogs.msdn.com/b/dotnet/archive/2014/11/12/the-roadmap-for-wpf.aspx Work on imp ...

  5. hdu 3001(状压dp, 3进制）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3001 由于本题中一个点最多能够访问2次,由此可以联想到3进制; visited[i][j]表示在状态i ...

  6. Eclipse的详细安装步骤

    第一种:这个方法是在线安装的  第二种:下载完整免安装包 首先打开网址:http://www.eclipse.org/ 然后在这里我就选择64位的安装,就以安装安卓开发的举例: 然后下载即可:

  7. 非正规写法获取不到tr,td

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 仿IOS圆形下载进度条

    /** * Created by C058 on 2016/5/25. */ public class MyHoriztalProgressBar extends ProgressBar { priv ...

  9. android studio遇到的问题(记录总结)

    SDK 无法更新解决方案 这个问题不是Android Studio的问题,而且由一些一些众所周知的原因导致的,我们这里说下解决办法. 打开SDK Manager,停止更新连接:在界面上方找Tools- ...

  10. HTTP协议开发应用-文件服务器

    HTTP(超文本传输协议)协议是建立在TCP传输协议之上的应用层协议.HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统. 本文将重点介绍如何基于Netty的 ...