方法一：

<!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. WPF中使用ReportViewer报表

    本篇博客将介绍如何在WPF中使用ReportViewer控件. 1. 环境准备:下载安装最新版ReportViewer(PS:需要安装Microsoft SQL Server System CLR T ...

  2. C#屏幕截图

    今天通过C#来实现一个简单的屏幕截图功能.实现思路,获取鼠标按下去的位置和鼠标左键释放的位置,计算这个区域的宽度和高度.然后通过 Graphics.CopyFromScreen 方法便可以获取到屏幕截 ...

  3. python调用系统命令popen、system

    python调用Shell脚本,有两种方法:os.system(cmd)或os.popen(cmd),前者返回值是脚本的退出状态码,后者的返回值是脚本执行过程中的输出内容.所以说一般我们认为popen ...

  4. [Surface] 在win8.1上使用QQ截图放大问题（解决办法）

    在使用每次截图的时候整个都被放大了,很让人郁闷,截不到完整的图,本着遇到问题解决问题的想法,这事早解决早好.   开工: 1. 度娘上搜索"win8 qq截图 放大",找到很多资料 ...

  5. Atom 和 markdown 基本使用

    Atom 和 markdown 基本使用 Atom 常用的快捷键 Cmd + Shift + P 打开命令窗口,可以运行各种菜单功能. Cmd + T 快速的多文件切换 Ctrl + G 文件内跳转到 ...

  6. hdu 1069 Monkey and Banana

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  7. 对android录制的NV21视频数据进行旋转(90,180,270)与剪切

    android默认的视频采集格式是NV21,(属于YUV420) 在onPreviewFrame中传进来的byte[] data即为NV21格式. 旋转算法 对NV21进行顺时针旋转90度,180度和 ...

  8. asp中 grideview 更新 无法获取值 解决办法

    string str1 = ((TextBox)(GridView1.Rows[e.RowIndex].Cells[7].Controls[0])).Text.ToString().Trim(); 来 ...

  9. CSS3_实现圆角效果box-shadow

    1.outline的直角与圆角 来给个div: <div class="use-outline"></div> 来再给个样式: .use-outline{ ...

  10. DOM--2 创建可重用的对象

    对象中包含的 分类(内置对象: 注意这些都是function:除了Function对象,实例都是object) Function对象 Function实例function 构造函数的function ...