经典实例(块级元素自适应屏幕宽度)
今天面试,一到题目是这样的:
有两个块级元素,左侧的块级元素的宽度是100px;右侧的块级元素不给定宽度,他们两个的高度都是150px;问,要如何实现右侧的div自动适应屏幕的宽度(即随浏览器的宽度而变化),我觉得这个是一个很经典的题目,因为有很多从事了很久的前端行业的人也不一定能做出来。下面让我来实现他们把,这里我已经把代码精简到了最简。
直接撸:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>块级元素自适应屏幕宽度</title> 6 <style type="text/css"> 7 .left{ 8 width: 100px; 9 height: 150px; 10 float: left; 11 background-color: #ff0000; 12 } 13 .right{ 14 height: 150px; 15 overflow: hidden; 16 background-color: #0f0; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="left"></div> 22 <div class="right"></div> 23 </body> 24 </html>
二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ display:-moz-box; display:-webkit-box; display:box; height:200px; } li:nth-child(1){ width:300px; background-color: #345; } li:nth-child(2){ -moz-box-flex:1; -webkit-box-flex:1; box-flex:1; background-color:#987; } </style> </head> <body> <ul> <li>1</li> <li>2</li> </ul> </body> </html>
效果如下:
最大化时:
中间随意的一个宽度,注意right中的width的变化:
浏览器宽度最小的情况下(浏览器最小的宽度只能是311px):
很棒有木有。