【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

两栏布局,左侧固定宽度,右侧自适应大小

原创 2016年05月31日 23:02:51

html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS布局</title>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
</body>
</html>

第一种方式

*{margin:0; padding: 0;}
html,body{
        height: 100%;/*高度百分百显示*/
}
#left{
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right{
    height: 100%;
    margin-left: 300px;
    background-color: #eee;
}

第二种方式

*{margin:0; padding: 0;}
html,body{
        height: 100%;/*高度百分百显示*/
}
#left{
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right{
    height: 100%;
    overflow:hidden;
    background-color: #eee;
}

第二种方法,我利用的是创建一个新的BFC(块级格式化上下文)来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境,它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建:
float 的值不为 none
position 的值不为 static 或者 relative
display 的值为 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一个
overflow 的值不为
visible

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

用CSS实现布局(两栏布局,多栏布局)

在网页上的布局比较经典的是两栏布局和三栏布局。 两栏布局 两栏布局是主内容区为主,左(右)侧有一栏,代码如下: style> #header...

两栏等高布局||两栏自适应高度

常用两栏等高布局三种方法 这里梳理一下三种常用的两栏等高布局方法,如有谬误,欢迎指正 -、margin-bottom和padding-bottom html hello hello h...

css布局之浮动模型&&左右两栏自适应布局

一个元素浮动时,其他内容会“环绕”该元素,浮动元素要设置一个width。浮动元素会自动生成一个块级框(行内元素会转成块级元素)。浮动元素规则浮动元素不能超过包含它的块的左右内边界。 浮动元素之前...

两栏自适应布局

实现效果:一边固定,一边自适应

浅谈css两栏布局

两栏布局,在开发过程中经常遇到,就工作中的问题随便写点; 左 右 123123131 123123131 123123131 123123131 123123131 1231231...

用CSS实现布局(两栏布局,多栏布局)

在网页上的布局比较经典的是两栏布局和三栏布局。下面简单总结自己对这两种布局的实现过程。 两栏布局 两栏布局是主内容区为主,左(右)侧有一栏,代码如下: style> ...

两栏布局左侧自适应

牛客网上碰到的一个题,应该是某公司的笔试题吧,题目描述很简单:实现如下布局。。 分析:顶部header与底部footer都很好实现,主要就是中间content部分的自适应。此处用到了之前的一个方...

html+css:一个自适应的两栏布局的实现

这是今天笔试的一道题目(太坑了,笔试题,没浏览器调试,布什么局。。。。好吧,其实是自己平时没练习) 题目:用html+css实现一个两栏布局,右栏固定宽度为100px,左栏填充剩余空间。要求左右两栏...

【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应

做了一道猫厂很经典的前端笔试题,解决了一直以来在两列布局的认识上思考太少的毛病。 题目要求是右侧aside固定宽度200px,左侧content自适应。 本来直接用float,发现aside总是会...

两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应)

两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应)
  • dq_pp
  • dq_pp
  • 2017-04-18 14:34
  • 210
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)