提出问题：

现在有两个div，但是两个div里面内容多少不确定，可能左边多，可能右边多，css要如何设置可以保证左右两边的div等高呢？

解决方案：

  1. 每个div使用display:table-cell
  2. div的父元素使用display:box

示例代码1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .div1,

        .div2 {

            border: 1px solid red;

            display: table-cell;

        }

    </style>

</head>

<body>

    <div class="div1">

        div1

        <br>

        <br>

        <br>

    </div>

    <div class="div2">

        div2

    </div>

</body>

</html>

示例代码2：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            display: -webkit-box;

        }

        .div1,

        .div2 {

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="div1">

            div1

            <br>

            <br>

            <br>

        </div>

        <div class="div2">

            div2

        </div>

    </div>

</body>

</html>

css实现左右两个div等高的更多相关文章

  1. css实现内容不相同的左右两个div等高

    问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...

  2. 布局两列div等高方法

    一.左右布局,左侧div绝对定位,外div相对定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  3. 解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题

    /*左侧div*/ .left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;} /*右侧div*/ .right ...

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

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

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

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

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

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

  7. css两个form不换行，两个div并排代码

    1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action=&quo ...

  8. html/css 两个div在同一行

    在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...

  9. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

随机推荐

  1. jsonp跨域 封装通用方法

    jsonp跨域 封装通用方法 //用法如下 jsonp({ url:"https://www.xxxx.com", params:{wd:'b'}, callback:'show' ...

  2. 手动SQL注入原理分析与实践

    代码仓库 本文所用代码的代码库地址: 点击这里前往Github仓库 了解SQL注入 定义 SQL注入攻击(SQL Injection),简称注入攻击,是Web开发中最常见的一种安全漏洞.可以用它来从数 ...

  3. 面试连环炮系列（二十三）： StringBuffer与StringBuild的区别

    StringBuffer与StringBuild的区别 频繁修改字符串时,建议使用StringBuffer和StringBuilder类.StringBuilder相较于StringBuffer有速度 ...

  4. rabbitmq~消息失败后重试达到 TTL放到死信队列(事务型消息补偿机制)

    这是一个基于消息的分布式事务的一部分,主要通过消息来实现,生产者把消息发到队列后,由消费方去执行剩下的逻辑,而当消费方处理失败后,我们需要进行重试,即为了最现数据的最终一致性,在rabbitmq里,它 ...

  5. 1、看源码MVC如何实例化控制器？

    我们知道MVC请求进来,然后路由匹配,然后找到控制器和Action,最后会调用Action方法,但是大家想想控制器是个普通的类,Action是个普通的实例方法,要想调用Action必须先实例化控制器, ...

  6. .NET Core 3终结点不能映射控制器

    今天在学.net core的时候发现了一个问题,终结点死活映射不了自己添加的控制器,后经过研究发现解决方法,可能这个问题不应该叫做问题,可是我是初学者,就把这个问题给拎出来.本人开发环境 VS2019 ...

  7. monkey测试跑多个apk|monkey命令

    1.如何跑多个apk的monkey? 黑名单:执行除了黑名单中以外的apk: 白名单:只执行在白名单中的apk. 黑名单的设置方法: a.创建一个名称为blacklist的txt文档,在文件中输入应用 ...

  8. Android进程管理机制研究

    一.Linux中的进程管理在Linux中,进程是指处理器上执行的一个实例,可使用任意资源以便完成它的任务,具体的进程管理,是通过“进程描述符”来完成的,对应Linux内核中的task_struct数据 ...

  9. Java程序员月薪三万，需要技术达到什么水平？

    最近跟朋友在一起聚会的时候,提了一个问题,说 Java 程序员如何能月薪达到二万,技术水平需要达到什么程度?人回答说这只能是大企业或者互联网企业工程师才能拿到.也许是的,小公司或者非互联网企业拿二万的 ...

  10. 微信支付 第一篇 JSAPI 支付配置与获取 OpenID

    开通微信支付支付产品 首先要在微信支付申请成为 微信支付商户. 选择开通具体的支付产品 成为微信支付商户后在管理后台选择微信支付中的具体支付产品并申请开通如 JSAPI . 将支付商户与公众号关联 这 ...