提出问题：

现在有两个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. Test 1023 T1&T2

    T1 popust (贪心 TimeLimit: 1000MS Memory Limit: 32768KB ​ 米尔科饿了如熊,偶然发现当地一家餐馆.餐厅提供\(n\)种餐,有一个有趣的定价政策:每种 ...

  2. Python 基础：入门必备知识

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:程序员野客 先看下咱们的基础目录1 标识符2 关键字3 引号4 编码5 ...

  3. python 多线程编程之进程和线程基础概念

    多线程编程 在多线程(multithreaded,MT)出现之前,计算机程序的执行都是由单个步骤序列组成的,该序列组合在主机的CPU中按照同步顺序执行.无论是任务本身需要按照步骤顺序执行,还是整个过程 ...

  4. c++-类与类的关系

    类与类的关系 #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std; class A { publ ...

  5. Vue+Webpack之 代码及打包优化

    本文重点介绍Vue单页面应用的优化手段: 异步加载 面切换时加loading特效 点击延迟 inline manifest 逻辑代码优化 依赖包体积优化 cdn引用 Vue代码优化 异步加载 所谓的异 ...

  6. 【转】淘宝UED上关于chrome的transition闪烁问题的解决方案

    最近在用BetterScroll实现一个功能的时候,在滚动区域中会有一个绝对定位的按钮,结果在IOS中出现了快速滚动,停止的时候,会先消失后显现的问题,所以查找了相关的文章,发现是transition ...

  7. 阿里巴巴 Kubernetes 能力再获 CNCF 认可 | 云原生生态周报 Vol. 32

    作者 | 丁海洋  陈有坤 李鹏  孙健波 业界要闻 阿里巴巴 Kubernetes 技术能力再获 CNCF 认可 CNCF 官网发布博文<Demystifying Kubernetes as ...

  8. SpringCloud之Feign 负载均衡请求超时时间

    版本声明: SpringCloud:Greenwich.SR4 SpringBoot:2.1.9.RELEASE Feign调用服务的默认时长是1秒钟,也就是如果超过1秒没连接上或者超过1秒没响应,那 ...

  9. 3.Python常用逻辑运算符

    #header { /* Initially hidden to prevent FLOUC */ display: none; background-color: #fff; /* Display ...

  10. 学习DDD的初步尝试，从最基础的开始，业务介绍，划分限界上下文 ，建立模型

    Conference业务简介 Conference是这样一个系统,它提供了一个在线创建会议以及预订会议座位的平台.这个系统的用户有两类: 1:客户,可以创建和管理会议. 2:会议座位预定者,可以预订会 ...