浅谈两栏式布局+三栏式布局（自适应）

最新推荐文章于 2024-02-01 16:12:44 发布
最新推荐文章于 2024-02-01 16:12:44 发布
阅读量755 收藏 2
点赞数 1
分类专栏： 前端复习 css 文章标签： 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baibaider/article/details/78756327
版权

两栏式布局（侧边栏固定宽度，主体内容部分自适应）

法1：

（侧边栏左/右浮动，主体部分margin-left/margin-right为侧边栏宽度）

<style type="text/css">
        .pra{
            height: 500px;
        }
        .aside{
            width:300px;
            text-align: center;
            line-height: 500px;
            height: 100%;
            background-color: bisque;
            float: left;
        }
        .main{
            text-align: center;
            line-height: 500px;
            margin-left: 300px;
            height:100%;
            background-color: #ffcccc;
        }
    </style>
<body>
<div class="pra">
    <div class="aside">aside</div>
    <div class="main">main</div>
</div>
</body>

这里写图片描述

法2

（侧边栏左/右浮动，主体部分overflow:hidden（加了BFC））

<style type="text/css">
        .pra{
            height: 500px;
        }
        .aside{
            width:300px;
            text-align: center;
            line-height: 500px;
            height: 100%;
            background-color: bisque;
            float: left;
        }
        .main{
            text-align: center;
            line-height: 500px;
            height:100%;
            background-color: #ffcccc;

            overflow: hidden;
        }
    </style>
<body>
<div class="pra">
    <div class="aside">aside</div>
    <div class="main">main</div>
</div>
</body>

这里写图片描述

tips：主体部分不做处理，虽然看起来有了自适应，但其实主体部分是整个pra，侧边栏浮动之后在上面，覆盖了主体的内容。

三栏式布局（两边侧边栏固定宽度，中间主体部分自适应）

法1：

（绝对定位法：左右绝对定位，主体用margin隔开）

<style type="text/css">
        body{
            margin:0;
            padding:0;
        }
        .pra{
            position: relative;
            height:300px;
        }
        .left,.right{
            width:200px;
            height:100%;
            position: absolute;
            top:0;
            /*  没加top的时候右块是在下面的*/
        }
        .left{
            left:0;
            background-color: #ffcccc;
        }
        .right{
            right:0;
            background-color: bisque;
        }
        .main{
            margin:0 210px;/*210是因为两边有距离，不需要可不加*/
            background-color: mediumpurple;
            height:100%;
        }
    </style>
<body>
<div class="pra">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>
</body>

这里写图片描述

缺点：当主体部分有内容时，缩小到不够原来的布局时内容会重叠。

法2：

（负margin法：主体部分下内容放在再一个子元素里，给这个子元素加margin，且left，right，main均左浮动）

<style type="text/css">
        .pra{
            height:300px;
        }
        .main,.left,.right{
            float: left;
            height:100%;
        }
        .left,.right{
            width:200px;
        }
        .main{
            width:100%;
        }
        .left{
            background-color: #ffcccc;
            margin-left:-100%;
        }
        .right{
            margin-left:-200px;
            background-color: bisque;
        }
        .main .body{
            margin:0 210px;
            background-color: mediumpurple;
            height:100%;
        }
    </style>
<body>
<div class="pra">
    <div class="main">
        <div class="body"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

这里写图片描述

帮助理解：

在没有left和right没有加负margin的时候是这样的：

这里写图片描述
全部浮动之后，left和right其实是跟在main后面的，加上margin就到了所要去的位置

法3

（自身浮动：left左浮动，right右浮动，main加margin。main的位置一定要在left和right之后，其他两个无所谓。）

<style type="text/css">
        .pra{
            height:300px;
        }
        .left,.right{
            width:200px;
            height:100%;
        }
        .left{
            float: left;
            background-color: #ffcccc;
        }
        .right{
            float: right;
            background-color: bisque;
        }
        .main{
            background-color: mediumpurple;
            margin:0 210px;
            height:100%;
        }

    </style>
<body>
<div class="pra">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>
</body>

这里写图片描述

tips：注意的地方是main一定要放在left和right之后，不然会导致结构混乱：

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

这里写图片描述

right是被main挤下来的，用Chrome检查main发现：
这里写图片描述

baibaider
关注
专栏目录
前端学习之CSS---两栏布局、三栏布局
weixin_45258154的博客
05-31 201
一、两栏布局 1、清样式、设置html高度 *{ margin:0; padding:0; } html,body{ height:100%; }   2、设置两个div 方案1：margin-left <style> .box1{ width:200px; height:100%; background:red; float:left; } .box2{
浅谈三栏布局-八种实现（less语法）
FengyangCoder的博客
01-21 1014
前端中布局方式多样，今天我们浅谈一下三栏布局的几种实现方式，希望对你有所帮助。 目录 什么是三栏布局？ 1.浮动布局实现： 2.flex布局实现 3.绝对定位实现 4.BFC实现 5.table实现： 6.网格（grid）布局 7.圣杯布局 8.双飞翼布局 总结： 什么是三栏布局？ 三栏布局：整体高度已知，左右两边宽度固定，中间内容宽度自适应 三栏布局常见的实现方式： ...
css布局：table布局、两栏布局、三栏布局
一颗程序猿
10-06 4472
css布局：table布局、两栏布局、三栏布局
两栏布局和三栏布局
weixin_64105376的博客
04-05 1903
本篇文章主要为大家讲解了双栏布局和三栏布局，希望能对大家有所帮助
两栏布局和三栏布局干货整理
眼里长着太阳，笑里全是坦荡
07-12 363
一、两栏布局1）浮动布局：边栏浮动，主栏留出相应的margin （边栏宽度）&lt;div id = "aside"&gt; &lt;/div&gt; &lt;div id = "main"&gt; &lt;/div&gt;div{ height:500px; } #aside{ width:300px; background-color:yellow; float:left; }...
两栏布局、三栏布局
98猛虎的博客
11-07 262
两栏布局 float + bfc 利用浮动和浮动元素对块级元素不可见(浮动元素会盖住非浮动的块级元素)，然后触发被覆盖的块级元素的 bfc，这样可以是右边蓝色的部分不被左边红色部分覆盖，而是刚好衔接。如果不触发 bfc 可以设置右边的的 margin-left=左边的宽度，但是不能实现右边的元素自适应。 <div> <p></p> <p&...
浅谈CSS三栏布局的Ｎ种实现
09-27
【CSS三栏布局】在网页设计中是一种常见的布局方式，它将页面分为左、中、右三部分，其中左右两栏宽度固定，中间栏宽度自适应。本文将探讨几种实现CSS三栏布局的方法。 1. **绝对定位法** 在这种方法中，我们使用...
浅谈css双飞翼布局和圣杯布局
01-19
双飞翼布局和圣杯布局都是实现两边固定中间自适应的三栏布局的方式，最近在整理三栏布局实现方式的笔记，决定但拉出来一篇，记一下这两个经典布局。 1、圣杯布局 浮动、负边距、相对定位、不添加额外标签 效果图 ...
android 右边充满 左边自适应,RelativeLayout中的格局，自适应宽度布局
weixin_42351363的博客
05-25 891
RelativeLayout中的布局，自适应宽度布局该图片中为android布局：总布局为 RelativeLayoutAtLeft 为居左android:layout_height="wrap_content" android:layout_width="wrap_content"android:text="AtLeft" android:layout_alignParentTop="true"...
css两栏布局、三栏布局
LLL_liuhui的博客
01-10 440
1、css两栏布局，一列固定，另一列宽度auto &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; /*body存在8px的外边距*/ *{margin: 0;p
CSS多栏布局-两栏布局和三栏布局
富朝阳的博客
05-14 2286
相信大家在面试的时候也会经常碰到两栏、三栏布局，一下列出来几种方式以供大家参考，废话不多说，直接上干货，如有不足之处，请大家补充。
【CSS】CSS布局：两栏布局、三栏布局、水平垂直居中
ColdCoder的博客
03-04 1366
1. 页面布局 三栏布局 题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为 300px，中间自适应。 五种方式： float布局：优点： 比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的；缺点：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。 absolute布局：优点：很快捷，设置很方便，而且也不容易出问题；缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。 flex布局：优点
两栏布局、三栏布局常用方法详解
abuanden的博客
03-03 746
这里写目录标题两栏布局一栏固定宽度，一栏自适应一、左float，右margin-left二、左侧float:left; 右侧overflow:hidden；（推荐）三、利用绝对定位四、利用弹性布局（推荐）一栏不定宽，一栏自适应一、左侧float:left; 右侧overflow:hidden；（BFC）二、利用弹性布局（推荐）三栏布局一. 浮动布局二、绝对定位布局三、flex布局(推荐）四、网格布局（推荐）五、圣杯布局（float+负margin）六、双飞翼布局(推荐） 两栏布局 一栏固定宽度，一栏自适应
CSS的自适应两栏/七种三栏布局
maid_04的博客
12-07 738
写本文主要是为了解决利用CSS的流体特性实现自适应的两栏/三栏布局 #先来了解一下什么是BFC 1.BFC的定义 全称Block Formatting Context，中文直译为块级格式上下文。BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的B
两栏式布局
明知迷途，从未折返
11-02 520
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&a
实现两栏布局、三栏布局的几种方式
dsadasdxzc的博客
08-28 128
两栏布局 1. float + margin .first-block { background: #F44336; width: 100px; height: 100px; float: left; } .second-block { background: #00BCD4; height:100%; margin-left:100px; } 2. float + overflow .first-block { background: #F44336; width:
实现两栏布局和三栏布局的多种详细方法
最新发布
贫僧法号依平
02-01 1024
基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器。两栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在。在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高。文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器。可以说是最好的方案了，代码少，使用简单。
中间固定三栏布局：div+CSS实战与详解
在传统的三栏布局中，常见的做法是左右两栏保持固定宽度，中间栏根据内容动态调整。然而，本文介绍的布局模式打破了这种常规，为前端开发者提供了一种新颖且实用的解决方案。 首先，作者提到他们是在一个技术交流...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值