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

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-09-03 13:57:27

    load average 的含义

    一般的进程需要消耗CPU、内存、磁盘I/O、网络I/O等资源,在这种情况下,平均负载就不是单独指的CPU使用情况。即内存、磁盘、网络等因素也可以影响系统的平均负载值。 在单核处理器中,平均负载值为1或者小于1的时候,系统处理进程会非常轻松,即负载很低。当达到3的时候,就会显得很忙,达到5或者8的时候就不能很好的处理进程了(其中5和8目前还是个争议的阈值,为了保守起见,建议选择低的)。

  • 2018-09-05 01:42:03

    git reset 回退以前某个版本及常用命令

    第一个命令只删除所有untracked的文件,如果文件已经被tracked, 修改过的文件不会被回退。而第二个命令把tracked的文件revert到前一个版本,对于untracked的文件(比如编译的临时文件)都不会被删除。

  • 2018-09-08 16:04:25

    Android SQLiteDatabase使用详细教程

    Android提供了创建和是用SQLite数据库的API。SQLiteDatabase代表一个数据库对象,提供了操作数据库的一些方法。在Android的SDK目录下有sqlite3工具,我们可以利用它创建数据库、创建表和执行一些SQL语句。下面是SQLiteDatabase的常用方法。SQLiteDatabase的常用方法方法名称方法表示含义openOrCreateDatabase(Stringpath,SQLiteDatabase.CursorFactoryfactory)

  • 2018-09-09 02:25:09

    单例模式的好处和缺点?为什么要用单例模式?

    单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。

  • 2018-09-09 02:31:48

    基于VCamera,仿微信录制短视频

    基于VCamera,Android仿微信录制短视频,如果喜欢请star,如果觉得有纰漏请提交issue,如果你有更好的点子可以提交pull request。