HTML流動布局各種寬度自適應


<!DOCTYPE html>
<html lang="en">
<style>
html,body{
padding: 0;margin: 0;
}
div{
font-size: 12px;
}
</style>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
<div style="width: 100%;height: 50px;background: red;">
<div style="float: left;width: auto; background: green;height: 100%;">
區域1自適應:
</div>
<div style="height: 100%;background: brown;overflow: hidden">
<div style="float: right;height: 100%;background: blue;width: 60px;">
區域2固定寬度60
</div>
<div style="height: 100%;background: yellow;width: auto; overflow: hidden">
<div style="float: left;width: 100px;background: gold;height: 100%;">
區域3固定寬度100px
</div>
<div style="background: rebeccapurple;height: 100%;overflow: hidden">
<!--內容垂直水平居中-->
<div style="width: 100%;height: 100%;display: table;text-align: center">
<div style="width: 100%;height: 100%;display: table-cell;vertical-align: middle;">
區域4自適應剩下的寬度
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

運行效果:


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com