关于几种自适应布局

Honwhy 发布于2019-08-02 10:53 / 2081人阅读

摘要：即自适应宽度元素定义一个父标签，并设置属性为为自适应宽度元素设置，应定宽元素宽度固定宽度元素设置属性为负值除此之外应注意结构中应先写自适应元素，再写固定宽度元素。

类型一 1，左右两侧，左侧固定宽度200px，右侧自适应占满 代码如下






左右两侧，左侧固定宽度200px，右侧自适应占满




    
    







左右两侧，左侧固定宽度200px，右侧自适应占满

运行结果

类型二 2，左中右三列左右固定200px 中间自适应占满 代码如下






左中右三列 左右固定200px 中间自适应占满

运行结果

类型三 3，上中下三行头部200px高底部200px高中间自适应占满 代码如下






上中下三行 头部200px高 底部200px高 中间自适应占满

运行结果

总结

固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。

即

自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；

固定宽度元素设置margin-left属性为负值：-100%；

除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。

GPU云服务器云服务器几种方式几种备案 js分几种网络专线有几种

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52618.html

关于几种自适应布局

摘要：即自适应宽度元素定义一个父标签，并设置属性为为自适应宽度元素设置，应定宽元素宽度固定宽度元素设置属性为负值除此之外应注意结构中应先写自适应元素，再写固定宽度元素。类型一 1，左右两侧，左侧固定宽度200px，右侧自适应占满代码如下左右两侧，左侧固定宽度200px，右侧自适应占满 .box{ width:600px; height:500px; ...

songjz 2019-08-30 15:54 评论0 收藏0
基于float的几种布局

摘要：在这里介绍基于的几种布局浮动与两侧自适应的布局如图所示，左边没有限定宽度，右边宽度自适应。使用实现的布局，可以适用于两栏的布局。单侧固定的布局单侧固定的布局分为固定布局和流体布局。在这里介绍基于float的几种布局. 1.浮动与两侧自适应的布局如图所示，左边没有限定宽度，右边宽度自适应。使用table-cell实现的布局，可以适用于两栏的布局。showImg(https://seg...

Freelander 2019-08-29 11:03 评论0 收藏0
自适应页面的实现方式

摘要：页面自适应自适应是指页面内容自动适应屏幕大小，实现自适应的方法有多种简易场景实现自适应浮动页面居中元素宽度不写固定而设置百分比自动匹配大小。后面详细介绍栅格系统的实现方式。当页面宽度发生改变时，每个栅格的大小会自动调整以适应页面尺寸。页面自适应自适应是指页面内容自动适应屏幕大小，实现自适应的方法有多种： 1.简易场景实现自适应：浮动、页面居中、元素宽度不写固定而设置百分比自动匹配大...

molyzzx 2019-08-29 16:07 评论0 收藏0
自适应页面的实现方式

摘要：页面自适应自适应是指页面内容自动适应屏幕大小，实现自适应的方法有多种简易场景实现自适应浮动页面居中元素宽度不写固定而设置百分比自动匹配大小。后面详细介绍栅格系统的实现方式。当页面宽度发生改变时，每个栅格的大小会自动调整以适应页面尺寸。页面自适应自适应是指页面内容自动适应屏幕大小，实现自适应的方法有多种： 1.简易场景实现自适应：浮动、页面居中、元素宽度不写固定而设置百分比自动匹配大...

omgdog 2019-08-02 11:01 评论0 收藏0