经典实例（块级元素自适应屏幕宽度）

最新推荐文章于 2024-03-12 17:39:05 发布

anhuang1896

最新推荐文章于 2024-03-12 17:39:05 发布

阅读量208

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/qianduanjingying/p/4768273.html

版权

今天面试，一到题目是这样的：

有两个块级元素，左侧的块级元素的宽度是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）：

很棒有木有。

转载于:https://www.cnblogs.com/qianduanjingying/p/4768273.html

anhuang1896

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
经典实例（块级元素自适应屏幕宽度）

今天面试，一到题目是这样的：有两个块级元素，左侧的块级元素的宽度是100px;右侧的块级元素不给定宽度，他们两个的高度都是150px;问，要如何实现右侧的div自动适应屏幕的宽度（即随浏览器的宽度而变化），我觉得这个是一个很经典的题目，因为有很多从事了很久的前端行业的人也不一定能做出来。下面让我来实现他们把，这里我已经把代码精简到了最简。直接撸： 1 <!DOCTY...
复制链接

扫一扫