实现两列布局的方法

html

<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

1. float+margin-left

.main{
 border: 1px solid black;
  overflow: hidden;//清除浮动
}
.left{
  width: 200px;
  background: green;
  float: left;
  
}
.right{
  margin-left: 200px;
  background: red;
}

left设为float: left,脱离文档流。right是块级元素会"无视"浮动元素,它的宽度随着适应父元素的宽度,此时margin-left为left元素的宽度。

2. absolute+margin-left

.main{
 border: 1px solid black;
  
}
.left{
  width: 200px;
  background: green;
  position: absolute;
}
.right{
  margin-left: 200px;
  background: red;
}

另外一种让两个block排列到一起的方法是对左侧盒子使用position: absolute的绝对定位。这样,右侧盒子也能无视掉它

3. 浮动和负边距实现

html

<div class="main">
    <!--右边盒子先渲染-->
    <div class="right">
        <div class="right-inner">right-inner</div>
    </div>
    <div class="left">left</div>
</div>

css

.main {
            border: 1px solid black;
        }

        .left {
            float: left;
            width: 200px;
            background: green;
            margin-left: -100%;
        }

        .right {
            float: left;
            width: 100%;
        }

        .right-inner {
            margin-left: 200px;
            background: yellow;
        }

可以不用指定左边宽度(即不用计算)的方法有:

4. flex

.main{
 border: 1px solid black;
 display: flex;
}
.left{
  width: 100px;
  background: green;
}
.right{
  background: red;
  flex: 1;
}

只须将右边盒子flex:1,意为宽度自动伸缩

5. float+BFC

.main{
 border: 1px solid black;
overflow: auto;
}
.left{
  float: left;
  background: green;
  margin-right: 20px;
}
.right{
  background: red;
  overflow: hidden;
}

由于触发了BFC的元素不会与浮动元素重叠这条特性,这种情况下,只需要为左侧的浮动盒子设置margin-right,就可以实现两个盒子的距离了。而右侧盒子是block级别的,所以宽度能实现自适应

链接

https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 以下文章是我在网上收集的内容,为了记录自己的学习以及为了以后不到处找而记录下来,如果对你有用,请感谢写这些文章的前...
    DCbryant阅读 949评论 0 2
  • 双飞翼布局和BFC 之前看到了一些面试题中,面试官会问到如果实现双飞翼布局或者是圣杯布局,这两个布局的理念基本是类...
    LucasDog阅读 1,064评论 0 4
  • 新晋制片人佟蔓薇携国产影片再冲海外电影节~继电影《七十七天》在中美电影节斩获殊荣之后,另一部由佟蔓薇担任制片人...
    艺术资讯1阅读 891评论 1 0
  • 选课,备课,做课件,终于要录课了。 期间的思考琢磨修改,就不啰嗦了,一句话——40分钟的一堂课,台下400分钟的准...
    羽衣甘兰阅读 340评论 2 0