第一种利用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. STM32-FreeRTOS快速学习之总结1

    1. 基础知识注意:在RTOS中是优先值越高则优先级越高(和ucos/linux的相反) 在移植的时候,主要裁剪FreeRTOS/Source/portable文件夹,该文件夹用来针对不同MCU做的一 ...

  2. Makedown

    目录 Makedown 介绍 Markdown的语法 Makedown 介绍 Makedown的创建者是John Gruber Q:什么是markdown呢? markdown和html类似是mark ...

  3. 第五课 Css3旋转放大属性，正六边形的绘制

    ---恢复内容开始--- 一.效果 二.知识点 1.background-color: rgba(0,0,0,.4);   (红色.绿色.蓝色.透明度(0-1)) 2.position: absolu ...

  4. vue element-ui 2.3.4版本 input number值为0时 显示不出来

    解决:官方修复了这个bug.升级element-ui为2.3.5版本就好了

  5. 安装完成Dynamics 365 CE后别忘了更改维护作业的运行时间

    摘要: 微软动态CRM专家罗勇 ,回复309或者20190308可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 安装完毕Dy ...

  6. Android远程桌面助手扩展之微信跳一跳辅助

    微信跳一跳的外挂辅助已是五花八门,万能的TB上也有了各种明码标价的代练.微信小程序游戏的火爆甚至带火了手游外挂产业.另一方面,跳一跳游戏也在不断更新,防止使用外挂刷高分.Android远程桌面助手支持 ...

  7. SQLServer之修改表值函数

    修改表值函数注意事项 更改先前通过执行 CREATE FUNCTION 语句创建的现有 Transact-SQL 或 CLR 函数,但不更改权限,也不影响任何相关的函数.存储过程或触发器. 不能用 A ...

  8. c/c++ 多线程 detach的困惑

    多线程 detach的困惑 求大神解答: 1,当在一个函数里启动一个线程后,并detach了 2,detach的线程里使用了这个函数里new出来的一个对象 3,detach后,delete了这个对象 ...

  9. SQLServer之创建存储过程

    创建存储过程注意事项 在 SQL Server. Azure SQL Database.Azure SQL 数据仓库和并行数据库中创建 Transact-SQL 或公共语言运行时 (CLR) 存储过程 ...

  10. 在android中进行单元测试的步骤

    若不知道怎么配上面两个参数