css自适应布局

最新推荐文章于 2024-08-29 01:41:42 发布
最新推荐文章于 2024-08-29 01:41:42 发布
阅读量339 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34838522/article/details/79462276
版权
一、两列布局

1.左列定宽，右列自适应
利用float+margin:
html代码：

<div class="left">左边</div>
<div class="right">右边</div>

css代码：

.left{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .right{
            height: 200px;
            background: blue;
            margin-left: 200px;
        }

（2）利用float+margin负边距
html代码：

<div class="left">左边</div>
<div class="parent">
    <div class="right">右边</div>
</div>

css代码：

.left{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .right{
            height: 200px;
            background: blue;
            margin-left: 200px;
        }
        .parent{
            width: 100%;
            float: right;
            margin-left: -200px;
        }

这种方法为第二个div添加了父标签，因为浮动元素脱离了文档流，不占用空间，因此设置宽度为100%，使其自动填充剩余空间。margin-left: 200px;是为了不覆盖住左列。margin-left: -200px;这里利用了负边距，相当于整个div快往左上移动了200px，使左右两列同行显示。
（3）利用float+overflow
html代码：

<div class="left">左边</div>
<div class="right">右边</div>

css代码：

.left{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .right{
            height: 200px;
            background: blue;
            overflow: hidden;
        }

这里使用overflow是利用其触发BFC，无需关注宽度，达到自适应。
(4)使用display:table
html代码：

<div class="parent">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

css代码：

.parent{
    width: 100%;
    display: table;
    height: 500px;
}
.left{
    width: 200px;
    background: red;
    display: table-cell;
}
.right{
    background: blue;
    display: table-cell;
}

利用display:table-cell自动分配表格宽度
（5）flex布局
html代码：

<div class="parent">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

css代码：

.parent{
    display: flex;
    height: 100px;
}
.left{
    width: 200px;
    background-color: red;
}
.right{
    flex: 1;
    background-color: blue;
}

（6）绝对定位
html代码：

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

css代码：

.parent{
    position: relative;
}
.left{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
}
.right{
    width: 100%;
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 200px;
    top: 0;
    right: 0;
}

这里爬了一点小坑，是在绝对定位了没有设置right:0，属性值，元素脱离了文本流。主要原因是对position:absolute和css流体特性理解得不够。
（7）grid布局
html代码：

<div class="content">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

css代码：

.content{
    width:100%;
    display: grid;
    grid-template-columns: 100px auto;
    grid-template-rows: 500px;
}
.left{
    background-color: red;
}

.right{
    background-color: blue;
}

2.一列不定，一列自适应
（1）使用float+overflow
html代码：

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

css代码：

.left{
    height: 200px;
    float: left;
    background-color: red;
}
.right{
    height: 200px;
    background-color: blue;
    overflow: hidden;
}

利用overflow触发BFC
（2）flex布局
html代码：

<div class="parent">
    <div class="left">hellohellohello</div>
    <div class="right"></div>
</div>

css代码：

.parent{
        display: flex;
    }
    .left{
        height: 200px;
        background-color: red;
    }
    .right{
        height: 200px;
        background-color: blue;
        flex: 1;/*自适应剩余宽度*/
    }

（3）grid布局
html代码：

<div class="content">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

css代码：

.content{
    width:100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 500px;
}
.left{
    background-color: red;
}

.right{
    background-color: blue;
}
二、三列布局

（1）float+margin
html代码：

<div class="parent">
    <div class="left">左定宽</div>
    <div class="center">中间定宽</div>
    <div class="right">右边自适应</div>
</div>

css代码：

.left{
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.center{
    width: 200px;
    height: 200px;
    background-color: blue;
    float: left;
}
.right{
    height: 200px;
    background-color: yellow;
    margin-left: 400px;
}

（2）float+overflow
只需将margin-left: 400px;改为overflow: hidden;即可。触发BFC
（3）双飞翼布局
html代码：

<div id="header"></div>
<div id="parent">
    <div id="center">
        <div id="inner">中间自适应</div>
    </div>
    <div id="left">左定宽</div>
    <div id="right">右定宽</div>
</div>
<div id="footer"></div>

css代码：

#header{
    width: 100%;
    height: 50px;
    background-color: gray;
}
#left{
    width: 200px;
    height: 500px;
    background-color: red;
    float: left;
    margin-left: -100%;
}

#center{
    width: 100%;
    background-color: blue;
    height: 500px;
    float: left;
}
#inner{
    margin: 0 200px;
}
#right{
    width: 200px;
    height: 500px;
    float: left;
    background-color: yellow;
    margin-left: -200px;
}
#footer{
    clear: both;
    width: 100%;
    height: 50px;
    background-color: gray;
}

难点：margin负边距的应用。margin-left: -100%;这里的百分百是相对于父元素计算的，使div位于左列，margin-left: -200px;使div块位于右列。
（4）圣杯布局
css代码：

#header{
    width: 100%;
    height: 50px;
    background-color: gray;
}
#parent{
    padding: 0 200px;
}
#left{
    width: 200px;
    height: 500px;
    background-color: red;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

#center{
    width: 100%;
    background-color: blue;
    height: 500px;
    float: left;
}
#right{
    width: 200px;
    height: 500px;
    float: left;
    background-color: yellow;
    margin-left: -200px;
    position: relative;
    right: -200px;
}
#footer{
    clear: both;
    width: 100%;
    height: 50px;
    background-color: gray;
}

html代码：

<div id="header"></div>
<div id="parent">
    <div id="center">
        <div id="inner">中间自适应</div>
    </div>
    <div id="left">左定宽</div>
    <div id="right">右定宽</div>
</div>
<div id="footer"></div>

圣杯与双飞翼的相同之处是都使用了浮动和margin负值。不同之处在于对中间列被覆盖区域的处理不同，双飞翼是添加子标签，使用margin属性来显示被遮住的内容；圣杯中是通过在三列外包裹一层div，并设置padding值来显示被遮住的内容，然后使用相对定位是左列位于左侧，右列位于右侧。
（5）使用flex
html代码：

<div id="header"></div>
<div id="parent">
    <div id="left">左定宽</div>
    <div id="center">中间自适应</div>
    <div id="right">右定宽</div>
</div>
<div id="footer"></div>

css代码：

#header{
    width: 100%;
    height: 50px;
    background-color: gray;
}
#parent{
    display: flex;
}
#left{
    width: 200px;
    height: 200px;
    background-color:red;
}
#center{
    flex: 1;
    height: 200px;
    background-color:yellow;
}
#right{
    width: 200px;
    height: 200px;
    background-color:blue;
}
#footer{
    width: 100%;
    height: 50px;
    background-color: gray;
}
三、多列布局

1.多列等宽

（1）使用浮动
html代码：

<div class="content">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

css代码：

.column{
    float: left;
    width: 20%;
    height: 500px;
}
.column:nth-child(odd){
    background-color: red;
}
.column:nth-child(even){
    background-color: blue;
}

（2）使用table
css代码：

.content{
    width: 100%;
    height: 200px;
    display: table;
}

.column{
    display: table-cell;
}
.column:nth-child(odd){
    background-color: red;
}
.column:nth-child(even){
    background-color: blue;
}

优点：不用在意列数，根据列数自适应平分宽度
（3）使用flex
css代码：

.content{
    display: flex;
    height: 200px;
}

.column{
    flex: 1;
}
.column:nth-child(odd){
    background-color: red;
}
.column:nth-child(even){
    background-color: blue;
}

优点：不用在意列数，根据列数自适应平分宽度。缺点：要考虑兼容性
2.多列等宽
1.使用padding和margin正负相抵
在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉。当一列的高度变化时，其他列的高度也会跟着变化
html代码：

<div class="container">
  <div class="left column">
    <div>sss</div>
  </div>
  <div class="center column">
    <div>sss</div>
  </div>
  <div class="right column">
    <div>sss</div>
    <div>sss</div>
    <div>sss</div>
  </div> 
</div>

css代码：
.container{
width: 960px;
overflow: hidden;
}
.column{
float: left;
width: 200px;
padding-bottom: 99999px;
margin-bottom: -99999px;
background-color: blue;
}
.left{
background-color: red;
}

.center{
background-color: blue;
}

.right{
background-color: yellow;
}
2.使用flex布局：
html代码：

<div class="container">
  <div class="left column">
    <div>sss</div>
  </div>
  <div class="center column">
    <div>sss</div>
  </div>
  <div class="right column">
    <div>sss</div>
    <div>sss</div>
    <div>sss</div>
  </div> 
</div>

css代码：

.container{
 display: flex;
  flex-direction: row;
}
.column{
  width: 200px;
}
.left{
  background-color: red;
}

.center{
  background-color: blue;
}

.right{
  background-color: yellow;
}

3.table布局：
html代码：

<div class="container">
  <div class="left column">
    <div>sss</div>
  </div>
  <div class="center column">
    <div>sss</div>
  </div>
  <div class="right column">
    <div>sss</div>
    <div>sss</div>
    <div>sss</div>
  </div> 
</div>

css代码：

.container{
  display: table;
}
.column{
  width: 200px;
  display: table-cell;
}
.left{
  background-color: red;
}

.center{
  background-color: blue;
}

.right{
  background-color: yellow;
}
四、两列全屏布局，高度跟浏览器高度一致

html代码：

  <div class="left"></div>
  <div class="right"></div>
css代码：
html, body{
 height: 100%;
}

 body{
   display:flex;
   flex-flow: row nowrap;
 }

 .left{
   flex: 0 0 300px;
   background: red;
   opacity: .5;
 }

 .right{
   flex: 1 1 100%;
   background: black;
 }

注意设置html的高度为100%，使html的高度起作用

爱傻笑的人
关注
专栏目录
几种css自适应布局方式
sinat_19594515的博客
11-09 4676
1.float+margin（自适应的那个元素），适应横向布局 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>左中右三列 左右固定200px 中间自适应占满</title> <style> bo...
使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)
11-20
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。 1).绝对定位法 绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。 代码如下： <!DOCTYPE htm
白骑士的CSS进阶篇之响应式设计 3.2.2 自适应布局
最新发布
JeremyTC的博客
08-29 779
在响应式网页设计中，自适应布局（Adaptive Layout）是一种关键策略，它确保网页能够在不同设备和屏幕尺寸上提供一致的用户体验。自适应布局主要包括流式布局（Fluid Layout）和弹性布局（Flexible Layout）。这两种布局方法各有特点，能在不同的应用场景中发挥作用。
CSS实现三栏自适应布局（两边固定，中间自适应）
Niucode的博客
04-11 1268
CSS实现三栏自适应布局（两边固定，中间自适应）
CSS自适应布局
CongJiYong的博客
06-14 513
自适应布局
CSS自适应布局思路
12-09
最近在做一个自适应布局的项目，所以学了下自适应，下面是总结。此总结只做效果，不关注效率和代码优化。 1.css3 html中添加复制代码代码如下:<meta name=”viewport” content=”width=device-width,target-...
CSS自适应布局实现子元素项目整体居中，内部项目左对齐
12-30
日常工作时，我们可能遇到这样一个布局：一个父元素框框（随着浏览器大小自适应宽度）里面有许多按钮，然后这些按钮（宽度固定）的整体需要在父元素内居中对齐，而按钮整体的内容又是从左往右排列。这里提供一个解决...
CSS自适应导航菜单的实例代码
09-24
CSS自适应导航菜单是一种根据设备屏幕大小调整布局的菜单，确保在桌面、平板和手机等不同设备上都能提供良好的用户体验。本文将深入讲解如何使用纯CSS实现一个自适应的导航菜单，并提供一个实例代码。 首先，我们来...
CSS 自适应布局(flex布局)
weixin_43045869的博客
07-23 1775
flex 布局、超出自动换行、自适应
CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)
07-13
带DOCTYPE的写法。。 ------------------ CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
CSS自适应布局分
一只小白奔向大牛的故事
02-25 301
自适应布局分两类：高度和宽度，方法有很多，我用三列布局举例，我就列几个通俗易懂的例子呗，懂了三列的，两列的原理一样，呵呵哒。 效果图如下：高度自适应——宽度自适应            1,高度自适应布局       原理就是把每个模块设置为绝对定位，然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高，然后中间模块的高度就自适应了。代码如下： html代码...
CSS响应式布局（自适应布局）
热门推荐
weixin_65607135的博客
09-15 1万+
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
css打造自适应布局
何东狮吼
07-30 1162
test *{ margin:0; padding:0; color:#FFF; } .a{ background:#FF0000; width:100%; float:left; margin-right:-100px; } .b{
CSS3_自适应布局
DaftJayee的博客
07-13 573
一、什么是弹性盒布局（可伸缩的盒子） 优势：1》写起来比较简单 2》灵活性、代码优雅 缺点：1》不兼容ie和安卓低级版本 二、使用 容器 (父元素) display:flex : 让容器成员是弹性的项目 flex-direction : 决定主轴是什么方向(项目排序方向) row : 横向 column : 纵向 row-reverse :横向翻转 column-reverse ：纵向翻转 flex-wrap :
CSS3自适应布局
高星雨的博客
11-06 2547
你好，欢迎打开我的博客，阿雨每天与你分享许多有趣新鲜的knowledge！ 最近给大家带来的是WEB前端中重要的一部分，一些有关CSS的基础知识，俗话说的好“万丈高楼平地起”，要想做一个优秀的前端人员，必须打好基础哦。 废话不多说，上干货 上为手机，下为pc，自适应小讲堂开课啦！ 第1步，设计思路，根据不同的设备，转换表格和列 第2步，实现技术，使用CSS3媒体查询中的media关键字，检测屏...
自适应布局
weixin_30505751的博客
06-18 799
　　之前在几个CSS布局问题中，举了上下固定，中间自适应布局的例子，当时的例子父级元素的宽高都给定了，其实并不是个好例子，既然要自适应，父级元素就应该跟着页面大小变化，从而中间子元素也自适应。3种方法，其实是2种，因为是针对body，所以用fixed可以直接替换absolute来用。注意同时给html和body的height100%，只给一个不行。 <!DOCTYPE html>...
css什么是自适应布局,CSS自适应布局
weixin_42300896的博客
08-04 1322
今天小编介绍自适应布局实现方法的demo，1)左侧固定宽度，右侧自适应，随着窗口的宽度而变化；2)右侧固定宽度，左侧自适应；3)中间自适应，两边定宽1、左定宽用左侧margin-left设为负宽度的方法，因为左侧脱离文档流，右侧宽度设为100%效果如下：left.png代码如下：.head{display: block;text-align: center;line-height: 50px;he...
css水平自适应布局
08-03
回答: 在CSS中，有多种方法可以实现水平自适应布局。以下是三种常见的方法: 1. 使用table布局: 可以使用HTML的table元素来实现水平自适应布局。通过设置table的宽度为100%，然后在table的每一行中使用td元素来定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值