发表于: 2017-06-29 22:42:54

1 888


今天完成的事情:

找职位、公司搜索页、职位搜索页的静态页面编写。

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

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

<!DOCTYPE>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="test.css" type="text/css">

</head>

<body>

    <div></div>

    <div>第一种方法</div>

</body>

</html>

.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-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个

overflow的值不为visible

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

<!DOCTYPE>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="test.css" type="text/css">

</head>

<body>

    <div></div>

    <div>第二种方法</div>

</body>

</html>

.one {

    float: left;

    height: 100px;

    width: 300px;

    background-color: blue;

}

.two {

    overflow: auto;

    height: 200px;

    background-color: red;

}


明天计划的事情:

继续静态页面的编写

遇到的问题:

暂无

收获:

左边宽度固定,右边自适应的方法


返回列表 返回列表
评论

    分享到