上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子

三个div盒子如下
<div class="container">
<div id=left"></div>
<div id="right"></div>
</div>

第一种:表格布局display: table+display: table-cell方式:

.container {
width: 80%;
background-color: #FFF;
margin: 0 auto;
border: 1px solid #F00;
display: table;
height: 200px;/*高度无效*/
}
#left {
width: 80%;
background: #063;
display: table-cell;
}
#right {
width: 20%;
background: #0C3;
display: table-cell;
}

但是这样有一个缺点,display: table-cell无法指定高度,宽度,等属性,高度有内容撑高。左右高度一致,由最高的一个决定。

第二种:display: -webkit-box/fiex实现

.container {
width: 80%;
background-color: #FFF;
margin: 0 auto;
border: 1px solid #F00;
display: -webkit-box;
}
#left {
width: 80%;
background: #063;
/*max-height:200px;/*由内容撑高,设置最大高度,多的出现滚动条*/
}
#right {
width: 20%;
background: #0C3;
max-height:200px;/*由内容撑高,设置最大高度,多的出现滚动条*/
}

运行结果和上面一样,但可以设定最高的div的max-height,不至于使内容少的一个看上去太孤单,像这样

第三种:使用绝对定位的方式来实现(推荐使用)

.container {
width: 80%;
background-color: #FFF;
margin: 0 auto;
border: 1px solid #F00;
position: relative;
}
#left {
width: 80%;
background: #063;
max-height:200px;/*由内容撑高,设置最大高度,多的出现滚动条*/
}
#right {
width: 20%;
background: #0C3;
position: absolute;
height: 100%;/*高度依赖父元素,父元素由左边撑高,*/
right: 0px;
top: 0px;
}

结果如图

父元素高度不确定,子元素左右等高的div布局的更多相关文章

  1. CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...

  2. 父元素高度为auto,子元素使用top:-50%没有效果的问题

    无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效 后来查阅w3c看到这样一句话: <percentage&g ...

  3. 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值

      下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...

  4. LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!

    LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayou ...

  5. [css]当父元素的margin-top碰上子元素的margin-top

    出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元 ...

  6. 【父元素parent】【子元素children】【同胞siblings】【过滤】

    1.父元素 $("span").parent()           //定位到span的父元素 $("span").parents()          // ...

  7. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  8. 父元素相对定位后,子元素在ie下被覆盖的问题!

    <div id="append_parent" style="position: relative;"> <div id="zoom ...

  9. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

随机推荐

  1. hdu 2087剪花布条 (KMP入门 子串出现的次数和子串个数)

    剪花布条 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  2. Freckles (最小生成树)

    #include<iostream> #include<cstring> #include<stdio.h> #include<queue> #incl ...

  3. 蚁群算法MATLAB解TSP问题

    Excel表exp12_3_1.xls中数据为: clc clear all [xdata,textdata]=xlsread('exp12_3_1.xls'); %加载20个城市的数据,数据按照表格 ...

  4. pytest 用 @pytest.mark.usefixtures("fixtureName")装饰类,可以让执行每个case前,都执行一遍指定的fixture

    conftest.py import pytest import uuid @pytest.fixture() def declass(): print("declass:"+st ...

  5. ubuntu上设置截图快捷键

    ubuntu自带的截图工具感觉能够满足基本的截图功能,可以不必安装另外的截图软件. 一般用到的截图类型有三种:全屏.当前活动窗口.自定义区域,其中自定义区域截图是最灵活也是我们用的最多的方式.在ubu ...

  6. qt获取本机ip

    //获取本机IP QString getIP(QString localHost) { QString ipAddr; #if 0 QList<QHostAddress> AddressL ...

  7. PHP学习(类型转化)

    PHP 在变量定义中不需要(或不支持)明确的类型定义:变量类型是根据使用该变量的上下文所决定的.也就是说,如果把一个 string 值赋给变量 $var , $var 就成了一个 string .如果 ...

  8. Linux安装JDK和Tomcat

    步骤如下: 1)在/root用户下建立jdk和tomcat两个文件夹并上传jdk-7u80-linux-x64.rpm和apache-tomcat-7.0.82.zip   2)安装jdk #  rp ...

  9. JS对HTML实体字符转义和反转义

    一.名词解释 HTML实体字符: 由于在HTML中有些符号是预留的,比如在html中不能直接使用尖括号(‘<’或‘>’),会被误认为标签符号.所以需要通过HTML实体字符去进行替换: HT ...

  10. JavaScript中的this关键字的几种用法

    JS 里的 this 在 function 内部被创建 指向调用时所在函数所绑定的对象(拗口) this 不能被赋值,但可以被 call/apply 改变 1. this 和构造函数 function ...