1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

css3自适应fill-available

  width:fill-available表示撑满可用空间

  举例来说,页面中一个<div>元素,该<div>元素的width表现就是fill-available自动填满剩余的空间

  出现fill-available关键字值的价值在于,可以让元素的100%自动填充特性不仅仅在block水平元素上,也可以应用在其他元素

  下面的例子中,inline-block元素宽度撑满了可用宽度

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  #tt{  	background-color: pink;    display:inline-block;    width:-webkit-fill-available;  }  		</style>  	</head>  	<body>  <div id="tt">自适应总结</div>  	</body>  </html>

类似的高度也有此特性

  下面的例子中,div元素高度撑满了可用高度

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  			#dd{  				height: 100px;  			}  #tt{    background-color: pink;    height:-webkit-fill-available;  }  		</style>  	</head>  	<body>  		<div id="dd">  	<div id="tt">自适应总结</div>		  		</div>    	</body>  </html>

等高布局

  于是,利用fill-available可以轻松地实现等高布局

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  			#dd{  				height: 100px;  			}  .tt{     width:100px;    height:-webkit-fill-available;    margin:0 10px;    display: inline-block;    vertical-align: middle;    background-color: pink;  }  		</style>  	</head>  	<body>  		<div id="dd">  		<div class="tt">首页</div>  		<div class="tt">Html/Css</div>  		<div class="tt">JavaScript</div>  		</div>    	</body>  </html>

原文链接:https://www.qiquanji.com/post/8010.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: