CSS 实现行内和上下自适应的几种方法

在写一个移动端网页，发现网页的头部搜索框两边各有固定宽度的按钮，搜索框可以根据宽度的变化来改变自己的宽度，达到填充的目的，也就是一种自适应吧，下面写写自己尝试的几种方法

一利用css3 的width：calc（100% - npx）；

<body><div style="border: 1px solid black;width: 100%;height: 100px"><div class="div1" style="float: left;height: 50px;width: 100px;background: red"></div><div class="div2" style="float: left;height: 50px;width:calc(100% - 120px);background: yellow"></div></div>
</body>

注意 width:calc(100% - 120px); 两边都有空格，不要问我为什么会知道。。。

二利用display:table和display:table-cell；

<body><div class="box"  style="border: 1px solid black;width: 100%;height: 100px;display: table"><li class="left" style="background: red;display: block;width: 100px;height: 100px;"></li><li class="right" style="background: deepskyblue;display: table-cell;width: 100%"></li></div>
</body>

display:table 这个属性很少用，display:table-cell可以自适应宽度，这点倒是挺好的。

三利用position:absolute；

<body><div style="height: 100px;width: 100%;border: 1px solid red"><span style="display: block;float: left;height: 100px;width: 100px;background: green"></span><span style="display: block;float: left;height: 100px;position: absolute;left: 100px;right: 100px;background: yellow"></span><span style="display: block;float:right;height: 100px;width: 100px;"></span></div>
</body>

利用position:absolute；不固定宽度，设置高度，然后将左右定位为预留的位置，然后就会自适应屏幕宽度了。

四关于上下自适应

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body >
<div style="position: absolute;top: 0;bottom: 0;width: 100%;border: 1px solid black"><div class="header" style="height: 100px;background: red"></div><div class="mid" style="height:calc(100% - 200px);background: yellow"></div><div class="footer" style="height: 100px;background: green"></div>
</div>
</body>
</html>

这个就是利用position:absolute；上下都定位到边上，就会自适应了。。

转载于:https://www.cnblogs.com/xueandsi/p/6007188.html

CSS 实现行内和上下自适应的几种方法相关推荐

html图片固定高宽比显示,科技常识：CSS背景图片固定宽高比自适应调整的实现方法...
今天小编跟大家讲解下有关CSS背景图片固定宽高比自适应调整的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS背景图片固定宽高比自适应调整的实现方法的相关资料,希望小伙伴们看 ...
码匠编程：CSS让元素绝对居中，你知道几种方法？
经常碰到有同学在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参考,如有不足之处,请大家补充问题描述: 给定两个元素,这两个元素是父子级关 ...
css做三角形横线加小三角,CSS创建三角形（小三角）的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
flex 固定一列_css实现两列固定与一列自适应的几种方法
本文介绍了css实现两列固定与一列自适应的几种方法,分享给大家,具体如下: 1.flex布局 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的 ...
网格自适应_网格自适应的 2 种方法——实现更高效的计算
网格自适应的目标是修正网格以更有效地解决问题. 通常,我们希望使用尽可能少的单元来获得精确的解:并希望在不太重要的区域使用较粗糙的网格,而在感兴趣的区域使用较精细的网格.有时,我们甚至可能会考虑各向异 ...
css如何设置透明度？设置透明度的两种方法（代码实例）
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
xlsx怎么设置行高列宽_Excel2016中调整行高和列宽的两种方法
在报表的编辑过程中经常需要调整特定行的行高或列的列宽,例如当单元格中输入的数据超出该单元格宽度时,需要调整单元格的列宽.本文图文讲述了Excel2016中调整行高和列宽的两种方法. 方法一:使用命令调 ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
干货来袭！CSS的行内样式与内联样式，看完就会了
什么是行内样式行内样式,其实从它的名字就可以看出来它的特点,就是直接在 HTML 标签中使用 style 属性设置 CSS 样式.例如像下面这样的: <p style="font-s ...

CSS 实现行内和上下自适应的几种方法

CSS 实现行内和上下自适应的几种方法相关推荐

最新文章

热门文章