正文

三列自适应布局

HuangRong  HuangRong  2022-08-12  151

关键词：

第一类，浮动在前：

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

方法一：float+margin

.main {
    margin-left: 150px;
    margin-right: 100px;
}
.left {
    float: left;
    width: 150px;
}
.right {
    float: right;
    width: 100px;
}

方法二：float+BFC

.main {
    overflow: hidden;
}
.left {
    float: left;
    width: 150px;
}
.right {
    float: right;
    width: 100px;
}

第二类，主要内容在前：

方法三：float+负边距+relative

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

这里和两列布局有些不同，在两列布局中，.main只需要右移给.left空出位置就可以了，所以给他一个margin-left就能解决。而在三列布局中，他不仅需要给.left腾出空间，还要给.right腾出空间，此时margin已经无能为力了，所以需要他们三个外面的盒子来做这件事情：

body {
    padding-left: 150px;
    padding-right: 100px;
}

这样子就会产生一个问题，给body添加了padding之后，.main的宽度就减小了，这就意味着.left的margin-left值也会减小，于是，当.main的宽度减小到小于.left的宽度时，.left的负边距已经不能为他创造足够的空间到上面一行了，他就会被挤下去。所以，为了避免这个问题，需要给包裹盒子设置一个最小宽度，当屏幕宽度小于这个值时，他将不再收缩。

.main {
    float: left;
    width: 100%;
}
.left {
    float: left;
    position: relative;
    left: -150px;
    margin-left: -100%;
    width: 150px;
}
.right {
    float: left;
    position: relative;
    right: -100px;
    margin-left: -100px;
    width: 100px;
}
body {
    min-width: 150px;
    padding-left: 150px;
    padding-right: 100px;
}

方法四：float+负边距+新盒子

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

这时的问题是，当屏幕宽度小于.left和.right宽度之和时，.main-content即中间那列已经完全被挤没了，所以，同样需要给他们外面的盒子设置一个最小宽度：

.main {
    float: left;
    width: 100%;
}
.left {
    margin-left: -100%;
    float: left;
    width: 150px;
}
.right {
    margin-left: -100px;
    float: left;
    width: 100px;
}
.main-content {
    margin-left: 150px;
    margin-right: 100px;
}
body {
    min-width:500px;
}

方法五：flexbox

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

.container {
    min-width: 500px;
    display: flex;
}
.main {
    margin: 0 10px;
    order: 1;
    flex: 1;
}
.left {
    width: 150px;
}
.right {
    order:2;
    width: 100px;
}

此文转载：地址：http://www.cnblogs.com/LiveWithIt/

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

左右定中间自适应三列布局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 查看详情

css三列布局

...单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应这五种情况两侧定宽中间自适应思路一: float... 查看详情

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

左可以.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: 查看详情

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

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

css两列自适应布局的4种思路

前面的话　　前面已经介绍过css两列布局中单列定宽单列自适应布局的6种思路的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table、flex和grid来介绍两列自适应布局的4种思... 查看详情

布局一两列自适应布局

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

两列自适应布局

两列自适应布局随便拿一个搜索引擎搜索一下“两列自适应布局”，都能得到很多种实现方法，这篇文章的重点是这些方法的底层逻辑是什么，他们是怎么得来的。分析：需要满足三个要求：①两个盒子在同一行②右边的盒子需... 查看详情

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

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

两列自适应布局

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

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

用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 查看详情

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

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

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

结构：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、两列自适应　　两列自适应是特别简单的布局方式，其要点在于把... 查看详情

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

两列布局：左侧定宽，右侧自适应方法一：利用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 查看详情

布局-三列布局（定宽+自适应+定宽）

两侧定宽中间自适应方案一：float+margin+(fix)结构：1<divclass="parent">2<divclass="left"><p>left</p></div>3<divclass="center-fix">4<divclass="center">5<p>center</p> 查看详情

使用css实现三栏自适应布局（两边宽度固定，中间自适应）

...p://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，... 查看详情

三列布局_左右绝对定位_中间适应

基本思路1.左右2列采用绝对定位来布局2.中间内容部分采用margin挤压出来<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>三列布局_左右绝对定位_中间适应</title> <styletype="text/css"> .containe 查看详情