搜尋
  • 登入
  • 報名
密碼重置成功

關注您感興趣的項目並了解有關它們的最新消息

溢出處理

溢出處理

程式碼如下:

<!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 "溢出处理";
重置程式碼
自動運行
提交
預覽 Clear