Fork me on GitHub 盒子
盒子
文章目录
  1. 需求
  2. 方案
    1. 利用Flexbox
    2. 使用 table和table-cell

实现未知高度父容器及其左右排列子容器的高度自适应

需求

需要实现两个子容器中一个依据另外一个的高度而自动等高,同时父容器也是同样自动等高,宽度可以自适应或者按需分配。

1
2
3
4
<div class="container">
<div class="content-1">未知高度和宽度的内容</div>
<div class="content-2">未知高度和宽度内容</div>
</div>

方案

目前我学习到的两种解决办法一种是利用flexbox,另外一种是利用table和table-cell,下文均有解释。

利用Flexbox

Flexbox通常能让我们更好的操作他的子元素布局,例如:

  • 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行;
  • 可以快速让他们布局在一列;
  • 可以方便让他们对齐容器的左、右、中间等;
  • 无需修改结构就可以改变他们的显示顺序;
  • 如果元素容器设置百分比和视窗大小改变,不用提心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

听起来相当有用,不是吗?接下来让我们更详细的探索它。

目前支持的浏览器

Opera Mobile12.1+、Opera12.5+、Firefox18+(partial)和chrome。Chrome需要添加浏览器前缀“-webkit-”,Opera支持标准语法,不用添加任何前缀。Firefox有部分支持,也需要添加前缀“-moz-”,同时需要设置一个标志(到firefox浏览器地址栏中输入:about:config,搜索“flexbox”,找到之后双击“layout.css.flexbox.enabled”,设置他的“value”值为“true”)。注意,其他浏览器除了opera自2009年支持flexbox以来,都使用旧的语法规则,真的不应该使用这些过时的语法。

flexbox的术语

  • 伸缩容器:一个设有“display:flex”或“display:inline-flex”的元素
  • 伸缩项目:伸缩容器的子元素
  • 主轴、主轴方向:用户代理沿着一个伸缩容器的主轴配置伸缩项目,主轴是主轴方向的延伸。
  • 主轴起点、主轴终点:伸缩项目的配置从容器的主轴起点边开始,往主轴终点边结束。
  • 主轴长度、主轴长度属性:伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度,伸缩项目的主轴长度属性是width或height属性,由哪一个对着主轴方向决定。
  • 侧轴、侧轴方向:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。
  • 侧轴起点、侧轴终点:填满项目的伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。
  • 侧轴长度、侧轴长度属性:伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是「width」或「height」属性,由哪一个对着侧轴方向决定。

关于更多flexbox的信息参考这篇:Flexbox——快速布局神器

就我们这个问题的话,只需要向下面这样设置样式即可:

1
2
.container { display: flex}
.content-1,.content-2 { flex:1; width:0;} // 不需要自适应可以一个写宽度,另外一个写flex,或者flex按比例分配

使用 table和table-cell

从前在页面布局的时候,table被大量的使用,其中一个好处便是元素可以轻松的定位,不会出现什么窜行的问题。你要是用div的话,一会inline一会float很是蛮烦。怎么样才能在使用div的时候也能享受的table定位的好处呢?以开头的问题为例:

1
2
3
.container{ width: 90%; margin: 50px auto; border: #333333 solid 1px; padding: 10px; display: table;}
.content-1{ height: 50px; background: #f30; width: 35%; display: table-cell;}
.content-2{ height: 50px; background: #03f; display: table-cell; }

将父容器的display指定为table,这样浏览器便会把parent当作一个table对待,然后向table中添加元素,元素具有的效果就会和直接使用td标签一样。

效果如下图

Alt text


如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢!
转载请注明出处:http://mcchen.club/


支持一下
扫一扫,支持McChen