提出问题：

现在有两个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. Ubuntu 18.04系统中不能ssh外网远程

    前言 今天我不小心动了电插板,导致服务器断电,用远程命令开机,居然很长时间没反应,索性就亲自按电源键重启.服务器正常开机启动,ssh可以内网访问,远程命令内网有效果,就是外网不行.经过分析排查,是不是 ...

  2. Oracle GoldenGate for Sql Server连接ODBC失败的处理方法

    Oracle GoldenGate for Sql Server连接oracle数据库的时候还是比较容易的,命令行下面只要: GGSCI> dblogin useridalias [ alias ...

  3. 《Java知识应用》Java Excel读取（xls、xlsx）和写入

    第一步: 链接: https://pan.baidu.com/s/1emJpl7cpvKZyRMzWccAhJA 提取码: p3a7 复制这段内容后打开百度网盘手机App,操作更方便哦 下载jar包: ...

  4. 常见的 由于未调整服务器 ulimit 而引起的内存溢出问题

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/e3bb62c9-9 ...

  5. impala-shell导出数据存在中文异常问题

    由于查询在impala-shell 中没有问题,在导出数据的时候才有问题,这是impala-shell的客户端是由python编写的,而Python无法自动将unicode对象写入没有设置默认编码的输 ...

  6. vue-其他

    vue-resource // 2.1 导入 vue-resource import VueResource from 'vue-resource' // 2.2 安装 vue-resource Vu ...

  7. JS---案例：简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...

  8. swoole加密可破解吗

    程序的执行和加解密过程合二唯一,无论是内部开发人员和外部黑客攻击,即使拿到了数据和私钥和服务器的root权限,也无法解密还原数据. Swoole将加解密分成了3部分(程序+算法+私钥),缺一不可解密. ...

  9. Hive脚本中切勿使用/**/注释

    Hive脚本中切勿使用/**/注释 Hive脚本的注释目前好像只有 -- ,我之前在做初版数据的时候 使用NotePad++ 习惯性的有时候注释会写成 /**/ ,然后就引发了问题 脚本上传到hue, ...

  10. How to: Use the Entity Framework Data Model Located in an External Assembly 如何：使用位于外部程序集中的EF数据模型

    If you have a non-XAF application, and want to develop an XAF application that utilizes the same dat ...