实现自适应宽度的五种布局方式

最新推荐文章于 2023-03-29 00:48:58 发布
最新推荐文章于 2023-03-29 00:48:58 发布
阅读量977 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangrong111222/article/details/83242416
版权

题目写一个三栏布局； 高度固定 左边300px，右边300px；中间自适应；

1 ：float 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .main.warpper>div{

            height: 100px;
        }
        .main.warpper .left{
            width: 300px;
            float:left;
            background: red;
        }
        .main.warpper .center{
            background: yellow;
        }
        .main.warpper .right{
            background: blue;
            width: 300px;
            float:right;
        }

    </style>
</head>
<body>

 <div class="main warpper">
     <div class="left"></div>
     <div class="right"></div> 
     <div class="center">float布局</div>

 </div>
</body>
</html>

注意 居中的位置的盒子 放在最后面  ，触发了bfc；

2，position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .main.warpper>div{

            height: 100px;
            position: absolute;
        }
        .main.warpper .left{
            width: 300px;
             left:0;
            background: red;
        }
        .main.warpper .center{
            left:300px;
            right:300px;
            background: yellow;
        }
        .main.warpper .right{
            width: 300px;
            right:0;
            background: red;
        }

    </style>
</head>
<body>

 <div class="main warpper">
     <div class="left"></div>
     <div class="right"></div>
     <div class="center">position布局</div>

 </div>
</body>
</html>

利用position 使中间自适应撑开 且自适应

3 flex：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .main.warpper{

            height: 100px;
            display: flex;
        }
        .main.warpper .left{
            width: 300px;
           flex:1;
            background: red;
        }
        .main.warpper .center{
            flex:1;
            background: yellow;
        }
        .main.warpper .right{
            flex:1;
            background: blue;
            width: 300px;
         }

    </style>
</head>
<body>

 <div class="main warpper">
     <div class="left"></div>
     <div class="center">flex布局</div>
     <div class="right"></div>


 </div>
</body>
</html>

4，table-cell布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .main.warpper{
          width: 100%;
            height: 100px;
            display: table;
        }
        .main.warpper .left{
            width: 300px;
          display: table-cell;
            background: red;
        }
        .main.warpper .center{
            display: table-cell;
            background: yellow;
        }
        .main.warpper .right{
            display: table-cell;
            background: blue;
            width: 300px;
        }

    </style>
</head>
<body>

 <div class="main warpper">
     <div class="left"></div>
     <div class="center">table布局</div>
     <div class="right"></div>
 </div>
</body>
</html>

5，grid网格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .main.warpper{
             width: 100%;
            display: grid;
            grid-template-rows:100px;
            grid-template-columns: 300px auto 300px;
        }
        .main.warpper .left{
            background: red;
        }
        .main.warpper .center{
            background: yellow;
        }
        .main.warpper .right{
            background: blue;
        }

    </style>
</head>
<body>

 <div class="main warpper">
     <div class="left"></div>
     <div class="center">grid布局</div>
     <div class="right"></div>
 </div>
</body>
</html>

总结一下 ：

1， float布局的问题：需要经常清除浮动，兼容性会不错；

2，position ，自由简单，但是太粗放了 不推荐；

3，flex ，兼容性一般， 但是 很好用啊；

4，table-cell 兼容性不错，也很合理 ，逐渐被废弃；

5，grid  css3的扩展 未来的趋势 代码量很少；

 

如果高度也不固定的话 那么flex 布局和table-cell布局能满足，其他的都要手动改

 

 

 

 

fire-fire-fox
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三栏自适应布局的7种实现方式
m0_55734628的博客
08-30 642
三栏布局其中包含左中右三栏，左边列和右边列的宽度都是固定的，中间列的宽度是自适应的。
CSS：宽高自适应详解
ZJH_are的博客
07-17 9005
2.选择器before{content''}表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容。1.选择器after{content''}表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容。-【重要】当块级元素脱离文档流的时候,宽度由内容决定=>设置浮动和定位的盒子一定记得要加宽高大小！-浏览器的高度默认是0,html,body{height100%}-HTML,BODY表示浏览器,默认是块级元素,宽度是100%...
自适应布局的三种方式
weixin_30362083的博客
07-26 450
高度自适应：利用position定位 <div class="top">200px</div> <div class="main">自适应</div> <div class="bottom">200px</div> html,body{ padding:0...
CSS中的宽高自适应以及最小最大宽/高
liu0218的博客
08-03 6389
一、宽度自适应 二、高度自适应 三、最小和最大宽度值 四、最小和最大高度值
【面试】移动端的自适应布局如何实现？
最新发布
weixin_62918410的博客
03-29 2365
移动端自适应
CSS响应式布局（自适应布局）
weixin_65607135的博客
09-15 1万+
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
css判断不同分辨率显示不同宽度布局实现自适应宽度
09-25
CSS判断不同分辨率浏览器（显示屏幕）显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断，但IE9以下版本不支持CSS3技术，这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局
左定宽度右自适应宽度并且等高布局实现代码
09-25
左侧固定宽，右侧自适应屏幕宽;左右两列，等高布局;左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）要求不用JS或CSS行为实现,那么下面我们就先来看看如何实现
div+css实现自适应宽度按钮
10-30
答案：浮动布局是一种CSS布局方式，能够使元素浮动在父元素中，实现自适应宽度按钮的效果。 4. 如何使用a标签和span标签来组合出完整的圆角矩形按钮？ 答案：可以使用a标签作为按钮的容器，span标签作为按钮的文字...
左侧固定宽度，右侧自适应宽度的CSS布局
10-30
一边固定宽度，另一边根据浏览器窗口大小自动缩放宽度是这种很常用的布局。特别是在BS项目的界面设计中，几乎都会用到。
Web自适应屏幕的宽度
rq_rq的博客
02-02 6680
$(function () { function setRem() { var clientWidth=$(window).width(); var nowRem=(clientWidth/375*10); $("html").css("font-size",parseInt(n
两栏自适应布局6种方案（一侧定宽，一侧自适应宽度）
莫小猪的菜鸟进阶路
01-03 2863
最近看面试题，看到很多次类似的题目，左侧定宽右侧自适应， 或则右侧定宽左侧自适应。网上众说纷纭，示例很多没有原理讲解。所以借助自己复习总结。希望能给初学者，自学者一些帮助吧。共勉。。。 目前所知的主要5种方式 方法一： 固定宽度区域浮动，自适应区域设置margin(值 = 固定的宽) 原理：float的固定宽度区域脱离文档流。自适应区域默认占满父元素宽度。通过设置margin(值 = 固定的宽) ...
页面布局的宽高自适应
zH_fighting的博客
08-16 678
宽高自适应 概念：根据设备、分辨率不同，有不一样的排版布局。 1.宽度自适应 1.不设置宽度 2.使用百分比 3.使用 min-width 或者 max-width; min-width:*px; 设置最小宽度 max-width:*px; 设置最大宽度 2.高度自适应 1.不设置高度 注意：如果子元素有浮动，会高度塌陷 ...
div布局根据内容自适应宽度
热门推荐
qq_34192983的博客
08-18 4万+
   在style里加上如下代码：             display:inline-block;         *display:inline;         *zoom:1;
input左边固定宽度，右边自适应布局
荆轲刺秦王
06-14 587
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>左边固定宽度，右边自适应布局</title> <style> .form-wap{ position: relative; } ...
网页自适应布局
qq_53663696的博客
03-08 2869
文章目录前言一、主流的框架是如何定义屏幕尺寸范围的（媒体查询）二、几种常见的方法1.Media Query2.meta Viewport3.Resolution4.imagesize5.font-size总结 前言 不同的设备对应不同尺寸的屏幕，如果需要将网页根据用户所持设备进行对应的自适应响应，这时候我们就需要考虑屏幕自适应的设置。 一、主流的框架是如何定义屏幕尺寸范围的（媒体查询） 所有数据来自Bootstrap的官网需要请自行查看。bootcss 设备 大小 手机 小于768p
Vue前端项目自适应布局
长不大的大灰狼
05-30 6917
Vue前端项目自适应布局一、单位尺寸二、基于rem实现自适应布局 一、单位尺寸 px % vw、vh: 窗口 em: 针对父元素的font-size rem：“root em”的缩写，是一个相对长度单位；rem单位作用于非根元素时，相对于根元素（html）字体大小，rem单位作用于根元素字体大小时，相对于其出初始字体大小。 说明： 谷歌浏览器，字体的默认大小是16px; 如果父元素item1的font-size=50px，那么子元素item2的1em=50px。 如果html的顶层font-size为
自适应页面的实现方式
weixin_34101229的博客
07-25 4874
页面自适应 自适应是指页面内容自动适应屏幕大小，实现自适应的方法有多种： 1.简易场景实现自适应：浮动、页面居中、元素宽度不写固定而设置百分比自动匹配大小。这样在页面宽度发生变化时，能利用以上特性实现简易的自适应效果。2.如果实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后用媒体查询技术，让页面根据不同屏幕尺寸来加载不同代码模...
自适应布局，响应式布局以及rem,em区别
u010869754的专栏
07-26 5590
一、简而言之， 自适应：不同大小设备呈现同样的页面效果，只是文字、图片等的大小不一样，但是相对位置一样。即在不同大小设备看起来一样 响应式：不同大小设备可能呈现不一样的页面效果            自己画了一个简略的示意图，如下： 二、rem,em区别 rem,em都是顺应不同网页字体大小展现而产生的 其中，em是相对其父元素，在实际应用中相对而言会带来很多不便 而re

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值