第一种利用dispaly:table,父级div设置dispaly:table子级div设置display: table-cell;

第一种利用dispaly:flex,父级div设置dispaly:flex子级div设置flex: 1;

上代码

<!DOCTYPE html>

<html>

<head>

	<title>布局测试</title>

	<style type="text/css">

		/*第一种方式*/

		.div-box1{

			display: table;

			padding: 10px;

			border: 1px solid #000;

		}

		.div1{

			display: table-cell;

			border: 1px solid #000;

		}

		.div2{

           display: table-cell;

           border: 1px solid #000;

		}

		/*第二种方式*/

		.div-box2{

			display: flex;

			padding: 10px;

			border: 1px solid #000;

			margin-top: 20px;

		}

		.div3{

			flex: 1;

			border: 1px solid #000;

		}

		.div4{

			flex: 1;

			border: 1px solid #000;

		}

	</style>

</head>

<body>

	<div class="div-box1">

		<div class="div1"><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p></div>

		<div class="div2">第二个盒子</div>

	</div>

		<div>测试成功</div>

	<div class="div-box2">

		<div class="div3"><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p></div>

		<div class="div4">第二个盒子</div>

	</div>

	<div>测试成功</div>

</body>

<script type="text/javascript">

</script>

</html>

　　运行结果截图

常见的页面中两个div自适应等高CSS控制的更多相关文章

  1. div+css:两个div并排等高 (table-cell)

    两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. vue监听页面中的某个div的滚动事件，并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...

  3. 解决同一页面中两个iframe互相调用jquery,js函数

    这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: <iframe width="10 ...

  4. Jquery 动态交换两个div位置并添加Css动画效果

    前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子 ...

  5. 修改页面中所有TextBox控件的样式--CSS

    1.HTML <div> TextBox<br /> <input type="text" name="name" value=& ...

  6. css实现两个div并排等高（一个div高度随另一个高度变化而变化）

    方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;

  7. Web页面中两个listbox的option的转移

    Html: <div><span>所选时间:</span><select id="xuanyongTimelb" style=" ...

  8. 监听页面中的某个div的滚动事件，并将其滚动距离保存到cookie

    在html中,写一个id为type的div: <div class="type" id="type"></div> css: .type ...

  9. bootstrap中实现外层DIV自适应，内层DIV宽度固定且居中的布局

    <!DOCTYPE html><html> <head> <link rel="stylesheet" href="css/bo ...

随机推荐

  1. Wcf传递的参数实际不为空，但是接收时显示为空。

    问题原因:参数大小写不一致引起,服务端接收参数为空 客户端引用 服务端定义

  2. Java基础：HashMap中putAll方法的疑惑

    最近回顾了下HashMap的源码(JDK1.7),当读到putAll方法时,发现了之前写的TODO标记,当时由于时间匆忙没来得及深究,现在回顾到了就再仔细思考了下 @Override public v ...

  3. C#设计模式之二十二备忘录模式（Memento Pattern）【行为型】

    一.引言 今天我们开始讲“行为型”设计模式的第十个模式,该模式是[备忘录模式],英文名称是:Memento Pattern.按老规矩,先从名称上来看看这个模式,个人的最初理解就是对某个对象的状态进行保 ...

  4. JavaScript 代码简洁之道

    摘要: 可以说是<Clean Code>的JS代码示例了,值得参考. 原文:JavaScript 代码简洁之道 作者:缪宇 Fundebug经授权转载,版权归原作者所有. 测试代码质量的唯 ...

  5. shell条件判断if中的-a到-z的意思

    [ -a FILE ]  如果 FILE 存在则为真.  [ -b FILE ]  如果 FILE 存在且是一个块特殊文件则为真.  [ -c FILE ]  如果 FILE 存在且是一个字特殊文件则 ...

  6. 从.Net到Java学习第十一篇——SpringBoot登录实现

    从.Net到Java学习系列目录 通过前面10篇文章的学习,相信我们对SpringBoot已经有了一些了解,那么如何来验证我们的学习成果呢?当然是通过做项目来证明啦!所以从这一篇开始我将会对之前自己做 ...

  7. java.lang.NoSuchFieldError异常

    原因就是主项目的xml文件和库项目中的xml文件 命名一样,导致库项目中的xml文件被主项目覆盖,所以库项目就找不到xml中的相关id,就报异常了.   解决方法:修改主项目中的xml文件命名,不要和 ...

  8. C# 利用SharpZipLib生成压缩包

    本文通过一个简单的小例子简述SharpZipLib压缩文件的常规用法,仅供学习分享使用,如有不足之处,还请指正. 什么是SharpZipLib ? SharpZipLib是一个C#的类库,主要用来解压 ...

  9. SQL Server 迁移至MySQL 关键步骤的梳理总结

    迁移主要是通过Navicat工具来实现的.迁移工具的选定在此不讨论. 迁移前准备 1.提前通知DBA\SA\BI等,并确认发布计划及数据库迁移方案. 2.梳理出SQL  Server DB 中影响业务 ...

  10. AlwaysOn配置时在连接步骤时报错（35250）

    1.错误描述 1XX.XXX.XXX.241(主节点) 1XX.XXX.XXX.242(从节点) 添加节点需要在主节点上执行的,错误代码:35250 报错截图 2．网上相关介绍都是怀疑端口5022的问 ...