溢出处理

溢出处理

代码如下:

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
         #container{
            background-color:red;
            width:300px;
            height:300px;
            /*溢出后的处理*/
            overflow:auto;
         }
      </style>
   </head>
   <body>
      <div id="container">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, debitis, similique, aspernatur ducimus tempora blanditiis id eum unde molestias doloribus dolores quia dignissimos illum magnam quam provident laborum adipisci aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, consectetur, maiores culpa nam reprehenderit aperiam natus temporibus explicabo laborum commodi sapiente quo cumque! Accusamus, quam hic fuga ducimus distinctio facere?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, debitis, similique, aspernatur ducimus tempora blanditiis id eum unde molestias doloribus dolores quia dignissimos illum magnam quam provident laborum adipisci aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, consectetur, maiores culpa nam reprehenderit aperiam natus temporibus explicabo laborum commodi sapiente quo cumque! Accusamus, quam hic fuga ducimus distinctio facere?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, debitis, similique, aspernatur ducimus tempora blanditiis id eum unde molestias doloribus dolores quia dignissimos illum magnam quam provident laborum adipisci aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, consectetur, maiores culpa nam reprehenderit aperiam natus temporibus explicabo laborum commodi sapiente quo cumque! Accusamus, quam hic fuga ducimus distinctio facere?
      </div>
   </body>
</html>

运行展示:

微信图片_20180314171411.png

溢出后设置overflow:auto会自动加载下拉框.

思考:大家可以考虑一下给你几张图片显示在一个固定的范围,图片总的显示长度是大于固定页面的,如何处理才能显示的比较合适?

继续学习
||
<?php echo "溢出处理";
提交重置代码
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

归来的少年

请问

2个月前 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~