两列布局——左侧宽度固定,右侧宽度自适应的两种方法

2017-02-09 09:02:26

 今天做了一个练习,要求用两种方法来实现左侧宽度固定、右侧宽度自适应的两列布局。一开始我以为会很简单,毕竟只是练习,但是我写出了一种方法之后却没能顺利的写出第二种方法。对于网上的一些解决方法我还是不太满意,于是自己继续琢磨着,问问一些前辈,希望得到一些思路。终于,皇天不负有心人,在自己翻译的一篇关于BFC的文章上,我找到了解决的方法。

  关于左侧宽度固定,右侧宽度自适应两列布局的一种很常用的方法我相信大家都知道。就是利用左侧元素浮动,或者绝对定位的方式使其脱离常规文档流,让两个块级元素能够在同一行显示。然后右侧元素 margin-left 的值等于左侧元素宽度,这时右侧元素将紧挨着左侧元素,由于块元素的宽度会自动默认充满剩下的屏幕,所以就实现了右侧自适应的效果了。

HTML代码如下:

 

复制代码

<!DOCTYPE><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="test.css" type="text/css"></head><body>
    <div class="one"></div>
    <div class="two">第一种方法</div></body></html>

复制代码

 

CSS代码如下:

 

复制代码

.one {
    position: absolute;
    height: 100px;
    width: 300px;
    background-color: blue;
}.two {
    height: 200px;
    margin-left: 300px;
    background-color: red;
}

复制代码

 

浏览器上输出效果:

  第二种方法,我利用的是创建一个新的BFC(块级格式化上下文)来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境,它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建:

  • float的值不为none

  • position的值不为static或者relative

  • display的值为 table-celltable-captioninline-blockflex, 或者 inline-flex中的其中一个

  • overflow的值不为visible

  关于BFC,在w3c里是这样描述的:在BFC中,每个盒子的左外边框紧挨着包含块左边框(从右到左的格式化时,则为右边框紧挨)。即使在浮动里也是这样的(尽管一个包含块的边框会因为浮动而萎缩),除非这个包含块的内部创建了一个新的BFC。这样,当我们给右侧的元素单独创建一个BFC时,它将不会紧贴在包含块的左边框,而是紧贴在左元素的右边框。

HTML代码:

 

复制代码

<!DOCTYPE><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="test.css" type="text/css"></head><body>
    <div class="one"></div>
    <div class="two">第二种方法</div></body></html>

复制代码

 

CSS代码:

 

复制代码

.one {
    float: left;
    height: 100px;
    width: 300px;
    background-color: blue;
}.two {
    overflow: auto;
    height: 200px;
    background-color: red;
}

复制代码

 

浏览器输出效果:

 

 

  以上仅是个人一些想法,大家还有更好的方法可以说出来一起学习学习。如果我有什么讲得不对的地方欢迎大家指正,谢谢大家。

 


  • 2018-02-01 22:09:18

    给linux添加回收站

    linux下常常使用rm,导致误操作删除一些重要的文档,很难恢复(当然也能恢复,不过比较复杂),所以在这种情况下,我们如果能给linux添加一个回收站就好多了,说白了,这个回收站机制也比较简单,就是使用 mv封装一个rm,简单的可以自己写个脚本,复杂点的就是在bin下添加这个封装命令就行了。

  • 2018-02-02 10:52:50

    IntelliJ IDEA 快捷键说明大全(中英对照、带图示详解)

    因为觉得网络上的 idea 快捷键不够详尽,所以特别编写了此篇文章,方便大家使用 idea O(∩_∩)O~ 其中的英文说明来自于 idea 的官网资料,中文说明主要来自于自己的领会和理解,英文说明只是作为参考。重要的快捷键会附带图示,进行详细的说明。

  • 2018-02-02 15:19:29

    贝塞尔曲线扫盲

    相信很多同学都知道“贝塞尔曲线”这个词,我们在很多地方都能经常看到。但是,可能并不是每位同学都清楚地知道,到底什么是“贝塞尔曲线”,又是什么特点让它有这么高的知名度。

  • 2018-02-04 23:46:16

    Android SQLite 升级数据库,在原有数据库的基础上添加一列

    原本以为很简单的问题,直接在原来创建数据库的语句中加上需要添加的列new_column,但是运行时发现,应用crash。原因是,原有数据库文件已经存在的情况下并不会重新创建数据库,也就是说此时数据库中并没有new_column列,这个时候,运行query()来查询数据库如果包括new_column列,就会导致应用crash。

  • 2018-02-06 22:23:01

    HTML5 Canvas 的事件处理

    DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到。比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行操作。比如有一个<path id=”p1″>元素,可以直接用jquery增加click事件$(‘#p1’).click(function(){…})”。然而这种DOM处理方法在HTML5的Canvas里不再适用,Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体,图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。

  • 2018-02-09 01:32:48

    PHP时间戳和日期相互转换

    在php中我们要把时间戳转换日期可以直接使用date函数来实现,如果要把日期转换成时间戳可以使用strtotime()函数实现,下面我来给大家举例说明。