第一种利用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. JSON 数据转换

    JSON概述      JSON(Java Script Object Notation)JS对象符号,通常JSON和XML是二选一的,JSON的数据格式很类似于JavaScript的对象 { &qu ...

  2. Java开发笔记（三十五）字符串格式化

    前面介绍了字符串变量的四种赋值方式,对于简单的赋值来说完全够用了,即便是两个字符串拼接,也只需通过加号把两个目标串连起来即可.但对于复杂的赋值来说就麻烦了,假设现在需要拼接一个很长的字符串,字符串内部 ...

  3. 罗汉果与Java虚拟机系列目录与说明

    声    明 罗汉果与Java虚拟机系列博文仅为本银结构性整合Java虚拟机知识的笔记和日常JVM问题的DEBUG记录.放到网上主要是为了方便自己今后查看.顺带能帮助到别人就更奈斯了. 目    录 ...

  4. Linux系统性能分析工具 sar--系统活动情况报告

    1.结论: sar 命令是linux系统上,分析系统性能的常用工具,可以查看cpu.内存.磁盘IO.文件读写.系统调用, 2.sar会有一个定时任务,定期记录当前系统信息到  /var/log/sa/ ...

  5. ARM汇编指令集_学习笔记（1）

    一.什么是ARM汇编? 运行在ARM处理器上的汇编语言就叫ARM汇编. C程序运行在X86平台,底层就是X86汇编:运行在ARM平台,底层就是ARM汇编.ARM汇编与X86汇编有显著区别. X86属于 ...

  6. restful api与传统api的区别(方式及语法)

    示例:一个状态数据操作接口 传统模式: api/getstate.aspx- 获取状态信息api/updatestate.aspx - 更新状态信息api/deletestate.aspx - 删除该 ...

  7. 【原】Java学习笔记019 - 面向对象

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 仔细想一想,Ani ...

  8. MFC自绘菜单

    自绘控件问题多多.本文以菜单为例. ①当要使用顶层菜单资源.对话框资源.状态栏资源等这3种资源的任何一种.那么CWinApp::InitInstance函数内部必须使用LoadFrame函数来加载资源 ...

  9. Bootstrap -- 初见 Bootstrap

    Bootstrap -- 初见 Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. ...

  10. Spring Boot 2.x 综合示例-整合thymeleaf、mybatis、shiro、logging、cache开发一个文章发布管理系统

    一.概述 经过HelloWorld示例(Spring Boot 2.x 快速入门(上)HelloWorld示例)( Spring Boot 2.x 快速入门(下)HelloWorld示例详解)两篇的学 ...