- 综合排序
- 最热优先
- 最新优先
- 来自专栏杰的记事本
两栏自适应布局延展到多栏自适应布局
说到两栏自适应布局，估计很多人看到这样类似的文章，我经常也看过，但是那些实现方式跟我所经常使用的两种方法不一样，经常使用的意思是，我一遇到这种布局，立马想到的就是使用这种。 所以，当我们看到多种实现方式的时候，一定要学会比较，然后选择其中一两种作为常用布局记到深处，就是想都不用想就用的。 margin负值在网上写得风生水起，但个人不是很喜欢使用，我认为它的唯一优点就是能把自适应内容的标签放在了最前面 ，使SEO更友好，因为SEO一进来就获取到了最重要的内容。 4、 多栏布局 延展到多栏布局，是一样的，其实没啥可说的，就是把所有固定宽度的栏目放在最前面浮动起来，把自适应的部分放在最后即可。 如果是英文网站或者文章里面有英文 还要考虑长英文单词的时候，这个时候如果单词在边缘就会被截断，这个时候，自适应的容器就要加上 word-wrap: break-word; 进行处理。
81660发布于 2019-09-04 - 来自专栏前端学习文档
CSS-自适应布局
source=cloudtencent 什么是自适应布局？ 在不同屏幕分辨率下，能够以最佳的方式进行展示，元素的宽度尺寸可能会改变，但是原有的展示方式不会改变。通常使用 % 单位来实现自适应布局。 场景 主要兼容不同分辨率设备 基础案例 以下简单模拟一个自适应元素，在不同设备/分辨率下展示的效果。 容器尺寸 640px * 320px 元素的宽度是自适应的，根据父级容器宽度决定。
93820编辑于 2023-04-18 - 来自专栏编程微刊
手机端自适应布局demo
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <style> .container { border: 1px solid #F0F1F1; -webkit-box-shadow: 0px 3px 3px #c8c8c8; -moz-box-shadow: 0px 3px 3px #c8c8c8; box-shadow: 0px 3px 3px #c8c8c8; } .search { height: 42px; margin: 0 20px; } .search_left { float: left; margin: 14px 7px 5px 11px; width: 8px; height: 8px; border-radius: 50px; border: 3px solid orangered; font-size: 12px; text-align: center; line-height: 30px; } .search_input { float: left; } .search_input input { border: none; height: 30px; margin-top: 5px; } .search_right { float: right; width: 20px; height: 20px; margin: 9px 17px 5px 10px; } .search_right img { width: 100%; height: 100%; } .start { height: 42px; margin: 80px 30px 40px 30px; border: 1px solid #F0F1F1; -webkit-box-shadow: 0px 3px 3px #c8c8c8; -moz-box-shadow: 0px 3px 3px #c8c8c8; box-shadow: 0px 3px 3px #c8c8c8; background: #ff4343; color: #FFFFFF; text-align: center; line-height: 40px;
21910编辑于 2025-05-18 - 来自专栏计算机编程
官方自适应新布局ConstraintLayout
写在前面的话： 谷歌在2016年自己研发的类似于IOS约束的布局，可以很好的完成自定义的布局控件的适配，现如今2K甚至是4K屏的出现，导致很多手机应用的开发受到适配上的限制，但ConstraintLayout 现市面上的博文都是根据 “拖拉弹拽” 的方式来使用ConstraintLayout，而真正意义上的程序员是不需要鼠标进行操作的，所以本篇文章用通俗易懂的方式，列出代码相关的属性，来探究此布局的用法。 理解的重大核心，我们可以就将ConstraintLayout理解为可自适应，多功能的RelativeLayout。 1.2、ConstrainLayout中，子view的布局方式： 在相对布局里面，我们经常做的事情就是使用这样的属性：“android:layout_alignParentXXX”，这里XXX有常见的 它能很好的适配线性布局下的某个子控件，在ConstraintLayout中我们也有相类似的子view属性，来达到这样的布局适配效果，其展示方式如图所示： ?
1.3K20发布于 2018-09-12 - 来自专栏张培跃
前端自适应布局方法总结
一栏固定一栏自适应 ? 实现代码： ? 右两栏固定，中间自适应 ? 方法二：使用绝对定位 绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度 方法三：使用负margin（圣杯布局） 圣杯布局的原理是margin负值法。 使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合，具体原理参考这里。 这里对圣杯布局解释特别详细。 ? 方法四：使用flex（css3新特性） ? ? 声明 | 文章著作权归作者所有，如有侵权，请联系小编删除。
85610发布于 2019-03-26 - 来自专栏centosDai
flex布局制作自适应网页
网页布局是css的一个重点应用。传统的布局都是依赖display、position、float属性来实现的，但是特殊布局就不易实现，如垂直居中。 01 flex布局是什么？ Flex 是 Flexible Box的简写，意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都可以指定为flex布局。 采用flex布局的元素，称为flex容器。
73420发布于 2021-11-26 - 来自专栏centosDai
flex布局制作自适应网页
网页布局是css的一个重点应用。传统的布局都是依赖display、position、float属性来实现的，但是特殊布局就不易实现，如垂直居中。 01 flex布局是什么？ Flex 是 Flexible Box的简写，意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都可以指定为flex布局。 采用flex布局的元素，称为flex容器。
89520发布于 2021-09-29 - 来自专栏centosDai
flex布局制作自适应网页
网页布局是css的一个重点应用。传统的布局都是依赖display、position、float属性来实现的，但是特殊布局就不易实现，如垂直居中。 01 flex布局是什么？ Flex 是 Flexible Box的简写，意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都可以指定为flex布局。 采用flex布局的元素，称为flex容器。
1.1K10发布于 2021-09-29 - 来自专栏农历七月廿一
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
原文：静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别 静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 自适应布局（Adaptive Layout） 自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。 改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。 可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 响应式几乎已经成为优秀页面布局的标准。 1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。 缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。
12.9K33发布于 2020-05-29 - 来自专栏编程社区
手机端页面自适应布局---rem
rem布局，在页面中引入这都js代码。 recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window) 这是rem布局的核心代码 有哪些情况可是使用rem布局？ 大部分情况下都可以使用rem布局，当然具体情况还要看情况而定。 一般导航栏不用rem，而是用flex布局，这是因为导航栏点击最多，所以给他一个固定的大小（高度固定，宽度自适应）。 大家可以看看淘宝的这个手机页面 淘宝手机站，基本就是这种感觉，底部导航和顶部搜索框用的高固定，宽自适应的方案，其余的部分基本都是随着浏览器宽度变化在等比例缩放。 最终页面代码首页代码大致如下 <!
2.2K52编辑于 2022-01-27 - 来自专栏李洋博客
响应式布局与自适应式布局有什么不同
很多人会对响应式布局和自适应式布局产生混淆，这两者到底有着什么样的区别呢？ 简言之，是一个网站能够兼容多个终端（手机、Pad、电脑）的布局方法，而不需要为每个终端书写一套特定版本的代码。 自适应布局： 移动端的发展带来了自适应布局。 自适应布局，是当前移动端实现网页布局的最常用的布局方法，需要综合使用多种知识。 ? 2.自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。 3.自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。 总之，响应式布局还是要比自适应布局要好一点，但是自适应布局更加贴切实际，因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。
3.6K30发布于 2021-06-15 - 来自专栏全栈程序员必看
layui表格自适应高度_css布局左侧固定右侧自适应
window.parent.document).find(“.layui-layer-iframe”).css(“margin-top”,_margin); } } } //删除delH高度内容后内容自适应界面高度
4.7K10编辑于 2022-11-17 - 来自专栏前端儿
CSS布局 -- 左右定宽，中间自适应
左右定宽，中间自适应 ? 有几种方法可以实现 改变窗口大小看看？ 方案一： 左右设置绝对定位，定宽，中间设置margin-left margin-right 查看 demo <! <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>左右定宽，中间自适应 <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>左右定宽，中间自适应 <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>左右定宽，中间自适应
1.5K10发布于 2018-09-03 - 来自专栏前端说吧
css布局 - 两栏自适应布局的几种实现方法汇总
案例初始化html结构如下： 案例这里使用的结构比较简单，但是核心思想是实现左边固定，右边自适应。 具体你业务中左边长啥样，右边内部又有啥复杂结构，那就要视具体情况了。 左边图片左浮动float：left、固定宽度、设置margin-right（具体看需求）； 右边文案自适应、overflow或padding或者margin解除文字环绕效果。 二、absolute - 定位实现 有了第一种浮动流的思想启示，我们可以想到，既然浮动元素不占据父元素流体空间，从而让文案部分通过block自适应，达到了占据父元素的全部空间的效果。 原理或其他css3方法详见《垂直居中布局的一百种实现方式》 这样做，遗憾没法做到随着文字的多少让右侧文案自适应地垂直居中。不知道正在观看的大佬你有什么好的方法吗？ 七、固定宽度+inline-block普通不一定普通 如果是pc端非自适应的布局，那么固定宽度也未尝不是一个好方法。 ?
2.3K20发布于 2019-02-20 - 来自专栏前端杂货铺
table-cell实现宽度自适应布局
利用table-cell可以实现宽度自适应布局。 table-cell有一些比较好用的属性，比如垂直居中，自适应高度宽度等，为元素设置table-cell布局之后，元素的margin失效，padding有效， 而且一旦元素设置了float或者absolute 以下可以实现宽度自适应布局：
<img src="../..2.5K50发布于 2018-03-15来自专栏Web技术学苑了解BFC特性，轻松实现自适应布局
具体可以看下效果 由于不同的布局方式，因此写出来的页面拓展性是完全不一样，拓展性强的布局方式，对于后期的维护是相当有益。 BFC实现自适应布局 有时候左侧固定，右侧自适应这种页面结构时常会有，这种布局方案有哪些可以实现呢
左边固定，右边自适应，右边随着左边的宽度而自适应
<div class="wrap-box float: left } 此时我们可以观察到main贴着slide-left,宽度就是父级的宽度 但实际上main是需要剩下的宽度，他需要根据左侧的slide-left的宽度而<em>自适应</em> height: 100px; background-color: yellow; overflow: hidden; } OK，现在就实现了右侧根据左侧宽度的大小<em>自适应</em>了 ,本质利用相邻BFC外边距合并 左侧固定，右侧<em>自适应</em><em>布局</em> 本文 code example[2] 参考资料 [1] MDN BFC: https://developer.mozilla.org/zh-CN89050编辑于 2022-07-28来自专栏前端那些事页面重构-让我们的布局自适应
如果你一昧用margin撑起来的布局，就会使布局不具有伸缩性，内容多少都会被定死，情况一有变化，要多留下大片空白，要么导致了重叠，在此使布局陷入混沌状态。 ? （是我给自己这三个月的总结反思吧） 一昧用margin撑起来的布局，具有很差的伸缩性。 这次的项目不大，但是内容还是比较多的（今年我大一，对我来说一个能学到很多东西项目才是最好的项目，至于现在挣多少外快，都是次要的） 先提到一个经典的基础布局-自适应高度（大家不要见笑） ? <! 移动端重构页面布局8大方法：http://www.divcss5.com/html5/h20001.shtml 昨天晚上读了张鑫旭的CSS流体(自适应)布局下宽度分离原则、页面重构的三无准则获益匪浅， 对流体布局有了新的认识吧 流式布局就像在学校食堂排长队打饭一样，来一个就跟在后面，这样使布局具有很强的伸缩性， 正如张鑫旭的文章介绍的无宽度原则，牺牲一层标签，单独设置宽度。
990100发布于 2018-01-05来自专栏OECOM网页开发自适应布局的方法
2015-09-08 11:36:13 在进行网也开发尤其是移动端页面开发，让程序员头疼的问题就是设备兼容性和自适应的，下面我来说一下我在工作中的一些方法。 [endif]--> 宽度采用百分比的形式来写，例如width:100%位占满整个屏幕，不要全部采用绝对定位并且绝对定位高度最好不要使用百分比， 因为一旦布局好移动端后，在pc端你会发现完全乱套了。 我一般使用float的方式浮动布局，高度采用margin-top的方式来进行移动。左右则采用margin-left的方式移动。
94920发布于 2020-07-01来自专栏杰的记事本CSS BFC实现多栏自适应布局
一、开篇之言 要说web上实现两栏自适应布局的方法，一双手都数不过来。不知大家有没有细想过，为什么这些方法可以实现自适应布局呢？ 本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局，还是针对传统布局。一些现代布局，如弹性盒子模型布局(Flexbox Layout)，格栅布局(Grid Layout)不在本文探讨之类。 因为不同自适应场景的留白距离是不一样的。 此时，我们可以利用块状元素的BFC特定实现更强大更智能的多栏自适应布局（本文重点）。 三、元素的BFC特性与自适应布局 1. BFC元素家族与自适应布局面面观 理论上，任何BFC元素和浮动搞基的时候，都可以实现自动填充的自适应布局。 ，因此，无法用来实现自动填满容器的自适应布局。
2K40发布于 2019-09-04响应式或自适应布局的流派
响应式或自适应布局的流派（此图有可能名称反了，但不重要，我个人更偏向于 bootstrap 被叫作响应式的）本文旨在罗列实现响应式或自适应布局的几种方案。 栅栏布局 方案随后 @media 和 viewport device-width 的组合拳之下，偷懒的方案栅栏布局横空出世。 但是吧，rem 方案 和 vw 方案，在非全屏宽布局中其实都不太 OK。. 具体原理不详，原文来自于 移动端 HTML 响应式布局之神奇的 pt。 所以仅有图片等元素的很多活动 H5 就直接用百分比绝对定位来实现自适应了。scale 缩放居中以上方案都是根据屏宽来产生响应的，那么有没有办法以容器宽度来响应的呢。
53910编辑于 2024-09-30
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号