正文

两列自适应布局

马梦一  马梦一  2022-08-11  303

关键词：

随便拿一个搜索引擎搜索一下“两列自适应布局”，都能得到很多种实现方法，这篇文章的重点是这些方法的底层逻辑是什么，他们是怎么得来的。

分析：

需要满足三个要求：

①两个盒子在同一行

②右边的盒子需要占满剩下的空间

③两个盒子不能重叠

这三个条件又分别有很多种实现方法（不考虑绝对定位）：

组合起来，会有很多种实现方式。

方法：

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

1、float+block+margin：

.left {
    float: left;
    width: 100px;
}
.main {
    margin-left: 110px;
    width: 100%;
}

缺点：如果想修改.left的宽度，还需要修改.main 的margin-left。

2、float+BFC：

.left {
    float: left;
    margin-right: 10px;
    width: 100px;
}
.main {
    overflow: hidden; //或overflow：auto
}

优点：可以设置浮动的margin来控制间距，想要修改宽度时只修改宽度就行了。

增加条件：

如果需要让重要的内容先渲染，即HTML结构应该是：

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

如果是这样的话，第一个盒子的宽度必须是100%，因为如果想要同行，他只能是float或是display:inline-block（不考虑绝对定位），这两种状态都需要设置width:100%来做到自适应。

浮动：

如果.main设置float的话，根据浮动流的原理，要让.main的右边出现和.left宽度相同或更多的空隙，才能让.left到上面一行来，如果要让.left贴住.main的左边线，就要制造出和.main自身相等的空隙，所以需要给.left设置margin-left:-100%;

这时候.left就叠到了.main的上面。如果给.main设置margin-left: 100px，.left还是会叠在.main上面，因为这时候.main的宽度变小了，.left的负边距也变小了，所以不管给.main的margin-left值设置成多大，.left始终会覆盖住它。

所以，如果想用float+margin让他们不重叠的话，只能再增加一个盒子，为其设置margin。即：

<div class="main">
    <div class="main-content"></div>
</div>
<div class="left"></div>

.left {
    margin-left:-100%;
    height: 400px;
    display: inline-block;  /*或者 float:left;*/
    width: 100px;
}
.main {
    float: left;
    width: 100%;
}
.main-content {
    margin-left: 110px;
}

除此之外还剩下两条路，一个是float+BFC，一个是position:relative。

先看float+BFC，.main是float，但是他已经完全被后面的浮动流盖住了，所以他无法充当那个"float"，显然他也无法做那个BFC，所以这条路是走不通的。

然后看position:relative。让.main右移空出.left的位置，然后用relative将其拉出来，即：

.left {
    margin-left:-100%;
    position: relative;
    left: -110px;
    display: inline-block;  /*或者 float:left*/
    width: 100px;
}
.main {
    margin-left: 110px;
    float: left;
    width: 100%;
}

display:inline-block;

如果让.main display:inline-block的话，必须让当前行盒留出大于.left宽度的空隙，并且让.left浮动，他们才可以到一行上去。

想让当前行盒缩短的话，可以给.main设置左边或是右边的负边距，这会有一个副作用，就是会让.main向左或向右移动，所以，只能给他设置左边的负边距。

到一行上面之后.main会盖住.left，这是因为在同一个堆叠上下文中，inline-block会在float的上面，所以还需要给.left设置position:relative让他显示出来。

因为.main已经设置了负的margin-left，所以无法给.left让出空间，position:relative这条路也是没法走了。float+BFC显然也是行不通。

所以只有一种方法：

<div class="main">
    <div class="main-content"></div>
</div>
<div class="left">/div>

.left {
    float: left;
    position: relative;
    width: 100px;
}
.main {
     display: inline-block;
     margin-left: -100px;
    width: 100%;
}
.main-content {
    margin-left: 110px;
}

总结：

从问题出发，结合基础的知识点，可以得出以下5种实现方式：

不要求重要内容先渲染的话，可以使用：

1.float+margin

2.float+BFC

要求重要内容先渲染的话，可以：

1.float+relative

2.float+新盒子

3.inline-block+新盒子

除此之外，还有CSS3的flexbox，他的缺点是不兼容低级浏览器并且会出现一些bug。

每个方法都有各自的优点和缺点，没有绝对的好与坏，要使用哪种方式还是要结合具体的需求来决定。

两列自适应布局

目的：想要在网页中实现自适应两列布局，即左边一列是固定宽度的，右边一列的宽度等于屏幕宽减去左边的宽度（或相反）。分析：需要满足三个要求：①两个盒子在同一行②右边的盒子需要占满剩下的空间③两个盒子不能重... 查看详情

两列布局（一列定宽，一列自适应）

用table+table-cell实现两列布局（一列定宽，一列自适应，且table是自动的两列自动登高）1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6<styletype="text/css"> 查看详情

两列自适应布局(代码片段)

第一种写法： wxml:<viewclass="page_first"><viewclass="page_li"wx:for="4"></view></view>wxss:.page_firstpadding:30rpx;box-sizing:border-box;display:f 查看详情

布局-两列布局（一列定宽，一列自适应）

结构：1<divclass="parent">2<divclass="left">3<p>left</p>4</div>5<divclass="right">6<p>right</p>7<p>right</p>8</div>9</div>样式：1.解决方案查看详情

css---两栏三栏布局

　　本文主要总结了两栏布局（两列自适应、一列固定一列自适应）、三栏布局（两边固定中间自适应）的一些方法，以便遗忘时能方便查询。一、两栏布局1、两列自适应　　两列自适应是特别简单的布局方式，其要点在于把... 查看详情

布局一两列自适应布局

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>两列自适应布局</title> 查看详情

三列自适应布局

分析了两列自适应布局的实现思路后，会觉得三列自适应布局的实现原理其实和他一模一样，不过是多了一个盒子而已。第一类，浮动在前：<divclass="left"></div><divclass="right"></div><divclass="main"></div>方法... 查看详情

常见的布局实现，如弹性布局，两列、三列布局

参考技术A一列固定宽度，另一列自适应宽度如下图所示：第一列固定宽度200px，第二列自适应。边上两列固定宽度，中间自适应注意html的写法，左右两列，也就是1，3列应该写在一起，中间列写在最后效果同上查看详情

css三列布局

前面的话　　前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应这五种情况两侧定... 查看详情

css基础知识点小计1-选择符权重优先级及两列布局中一列自适应，另一列固定宽度

1：标有!important标记的样式2：HTML编辑的样式3：用户设置的样式4：浏览器默认的样式一列自适应，另一列固定宽度，个人认为如下方法比较好用<!DOCTYPEhtml><html><head> <title> html5 </title> <linkrel="stylesheet"... 查看详情

两列布局(代码片段)

两列布局效果： 4.1左列定宽,右列自适应(1)利用float+margin实现html代码:<body><divid="left">左列定宽</div><divid="right">右列自适应</div></body>css代码:#leftbackground-color:#f00;float:lef 查看详情

css布局，单列宽度固定，另一列自适应。

CSS布局，要求是满屏显示，分成两列显示，其中左边单列宽度固定，右边一列自适应。能根据不同的显示屏分辨率，右边一列可以占满剩下的屏幕。请问该如何设置。左边单列固定宽度，如：width：100px;height:auto;右边一列自适应... 查看详情

三列自适应布局

第一类，浮动在前：<divclass="left"></div><divclass="right"></div><divclass="main"></div>方法一：float+margin.main{margin-left:150px;margin-right:100px;}.left{float:left;width:15 查看详情

三列自适应布局（左右定宽中间自适应）

左右定中间自适应三列布局1.绝对定位 2.浮动 3.flex11.绝对定位2<!doctypehtml>3<head>4<metacharset="utf-8"/>5<title>三栏布局</title>6<styletype="text/css">7*{8margin:0;9padding:0;10}11 查看详情

双飞翼布局和圣杯布局解析

...布局或者说圣杯布局它们都是三列布局；（一列自适应和两列固定列）。当然，除了三列布局，还有一列布局（自适应居中）、两列布局(一列自适应一列固定列)。其他两种都相对来说简单些。就着重说一下三列布局。一、双飞查看详情

常用布局的实现（两列布局三列适应布局，两列等高适应布局等）

两列布局：左侧定宽，右侧自适应方法一：利用float和负外边距<style>*{ margin:0; padding:0;}.main,.sitebar{ font:bolder20px/300px;}.main{ width:100%; float:left;}.main.content{ margin-left:200px; background-color:red;}.siteb 查看详情

三列布局中，怎么设置左右固定，中间列自适应，且都显示在同一行。

左可以.left{width：200px;background:red;height:500px;position:absolute;left:0;top:0;}右可以.right{width:300px;height:500px;position:absolute;right:0;top:0;background:blue}中间可以.center{height:500px;background: 查看详情

css布局的相关几个难点

前几天被问的一种布局方式,三列布局左右两列固定宽度，中间一列自适应的布局方案：1.当然css3里面的flex是可以实现这种情况的，但是这个属性实在是兼容性太差，这里就说一种自己查的普适方案；2.当时第一次看到这个题目... 查看详情