方法一：

<!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. [JavaCore] 不错的Java基础学习资料-持续更新

    容易弄混的JAVA基础知识: http://www.iteye.com/topic/943647 [总结]String in Java: http://www.iteye.com/topic/5221 ...

  2. 第二十三篇：在SOUI中使用LUA脚本开发界面

    像写网页一样做客户端界面可能是很多客户端开发的理想. 做好一个可以实现和用户交互的动态网页应该包含两个部分:使用html做网页的布局,使用脚本如vbscript,javascript做用户交互的逻辑. ...

  3. 无法定位程序输入点 _glutCreateWindowWithExit于动态链接库glut32.dll上

    程序运行提示错误"无法定位程序输入点 _glutCreateWindowWithExit于动态链接库glut32.dll上",网上查了说是opengl的.lib和.dll版本过低, ...

  4. 在64位Win7中使用Navicat Premium 和PL\SQL Developer连接Oracle数据库备忘

    最近接手了一个项目,服务器端数据库是oracle 11g 64位.由于主要工作不是开发,也不想在自己的电脑上安装庞大的oracle数据库,因此寻思着只通过数据库管理工具连接数据库进行一些常用的查询操作 ...

  5. 【MongoDB】3.详细命令集合

    [注意:MongoDB自动将_id字段设置为主键] -------------------------------------------------------------------------- ...

  6. Android 实现ListView中Item被单击后背景色保持高亮

    今天为了解决一个需求,就是我有一个slidingDrawer,里面是一个ListView.然后,单击其中的Item,默认只是显示一个橙色背景后就恢复了.客户便有着个需求,需要单击这个Item的背景高亮 ...

  7. loadrunner中变量和参数之间的转化实例

     1.变量转换成参数值的两种方法: 方法一: char *test="Agoly"; lr_save_string(test,"testPa");   lr_e ...

  8. 使用Eclipse将Web项目打Jar包方法

    1.对下载.安装和运行Eclipse,就不再说了: 2.找到待打包项目: 3.右键,Export-->Export: 4.选择,Jar: 5.按如图操作: 6.完成后:

  9. js高级技巧之高级定时器

    实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级. 可以吧js想象成在时间线上运行的. JavaScript中没有任何代码是立刻执行的,但一旦进程空闲则尽快执行. 1.重复的定时器: ...

  10. Spring事务解析3-增强方法的获取

    从InfrastructureAdvisorAutoProxyCreator的层次结构中可以看到,InfrastructureAdvisorAutoProxyCreator间接实现了SmartInst ...