第一种利用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. javaweb项目创建和虚拟主机配置

    首先点击File-àNew-àWeb [roject-à在Projcet Name里写项目名-à点击finish-à会出来一个框,选择NO,一个javaweb项目就创建好了.具体请看下图! 配置服务器 ...

  2. js中slice，SubString和SubStr的区别

    来自:https://blog.csdn.net/qq_37120738/article/details/79086706 侵删 slice() 定义和用法 slice() 方法可从已有的数组中返回选 ...

  3. Spring boot入门（二）：Spring boot集成MySql,Mybatis和PageHelper插件

    上一篇文章,写了如何搭建一个简单的Spring boot项目,本篇是接着上一篇文章写得:Spring boot入门:快速搭建Spring boot项目(一),主要是spring boot集成mybat ...

  4. 深海中的STL—mt19937

    mt19937 当你第一眼看到这玩意儿的时候 肯定禁不住吐槽:纳尼?这是什么鬼? 确实,这个东西鲜为人知,但是它却有着卓越的性能 简介 mt19937是c++11中加入的新特性 它是一种随机数算法,用 ...

  5. 功能强大的PDF实用工具

    PDF实用工具(PDFTool)是北京博信施科技有限有限公司研制开发的一款专门提供对PDF文件进行编辑.加工的处理软件.本软件具有对PDF文件进行分割.结合.加密.解密.添加水印.设定有效期限等多种功 ...

  6. OPC协议解析-OPC客户端与服务器通讯解析

    1      OPC服务器 OPC服务器, 是指按照OPC基金组织规定的OPC规范群开发的软件驱动.OPC服务器作为中间媒介负责从数据源读取数据再跟另外一端的客户端通信.在 OPC客户端/服务器 的结 ...

  7. EditText超出字数限制，给用户提示

    当我们在Editext输入内容的时候,检测如果超过限制的长度无法输入内容,并且给用户提示. 首先我想到了下面的方法: editText.addTextChangedListener(new TextW ...

  8. ES6常用

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不 ...

  9. Docker 创建 Jira Core(Jira SoftWare) 7.12.3 中文版

    目录 目录 1.介绍 1.1.什么是 JIRA Core? 1.2.什么是 JIRA SoftWare 2.JIRA 的官网在哪里? 3.如何下载安装? 4.对 JIRA 进行配置 4.1.JIRA ...

  10. MySQL 基础知识梳理学习（五）----详解MySQL两次写的设计及实现

    一 . 两次写提出的背景或要解决的问题 两次写(InnoDB Double Write)是Innodb中很独特的一个功能点.因为Innodb中的日志是逻辑的,所谓逻辑就是比如插入一条记录时,它可能会在 ...