左边固定右边自适应

看看下面的常见布局,当右边div的width为auto时,右边div宽度已是自适应

.div1{
    width: 200px;
    height: 200px;
    border: 1px solid black;
}
.div2{
    width: 50px;
    height: 50px;
    background: red;
}
.div3{
    margin-left: 50px;
    width:auto;
    height:30px;
    background: blue;
}

所以要做的是把右边的div移上去,两行变成一行,有如下两种方法:
1.左边div再加个float:left(如果右边div没有margin-left:50px,则会覆盖左边div)
2.父div加relative,左div加absolute(让左边脱离文档流)


脱离文档流的几种方法

两边固定,中间自适应


BFC规则:
与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,295评论 0 8
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 4,761评论 0 3
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,596评论 0 5
  • 神农尝草识黄花,世代栽培品质佳。 大嫂采收头滴汗,幺姑翻晒面飞霞。 观光赏景游人醉,摄影题诗骚客夸。 补脑养颜纯绿...
    艾思阅读 6,711评论 6 6

友情链接更多精彩内容