为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/信息排列效果

问题overflow：hide，隐藏超出部分的图片,这里没有实现了？？

   
   

http://img1.sycdn.imooc.com//5656ce0000016b6501840372.jpg  图片下部分没有隐藏，这里全部显示。

#box ul li{ width=164px;height:auto;float:left;margin:7px;border:1px solid gray;} //设置li样式  .a-img{height:164px;width:164px;display:block;  overflow:hidden; }
    p a,p span{
        display:block;
        line-height:23px;
        padding-left:10px;
    }

记得喝水

2015-11-26

源自：信息排列效果  2-4

关注问题 我要回答
6409
操作
收起

正在回答

3 回答

李晓健
2015-11-26

给一下页面结构　

0 回复 有任何疑惑可以回复我~
收起回答
#1

记得喝水 提问者

我看了下，原来是受代码前面的注释的影响，可能是编辑页面太窄了，换行引起的： #box ul li{ width=164px;height:auto;float:left;margin:7px;border:1px solid gray;} //设置li样式,就是每一个人的信息块（文字和照片） .a-img{height:164px;width:164px;display:block; overflow:hidden; }
2015-11-26 回复 有任何疑惑可以回复我~
#2

李晓健 回复 记得喝水 提问者

解决了？
2015-11-27 回复 有任何疑惑可以回复我~
#3

记得喝水 提问者 回复 李晓健

对！谢谢。
2015-11-27 回复 有任何疑惑可以回复我~
#4

香宝的夫差

在网页的编程练习中，提交代码后会出现图片下部分未隐藏。在浏览器打开无问题，前提是所需的css写正确
2018-01-15 回复 有任何疑惑可以回复我~
查看1条回复
记得喝水 提问者
2015-11-26 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<style type="text/css">
    *{margin:0px;padding:0px;}
    body{font:"微软雅黑";font-size:14px;}
    a{text-decoration:none;}
    ul,li{list-style:none;}
    #box{height:auto;width:550px;border:1px solid #aaa;margin:0 auto;overflow:hidden;}
    .top{height:40px;}
    .top a{height:16px; width:16px;display:block;float:right;margin:5px;}
    .btn-list-off{ background:#fff url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -38px 0px; }  
    .btn-car-on{background:#fff url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -21px -34px;}
    .btn-list-on{background:#fff url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -21px 0px;}
    .btn-car-off{background:#fff url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -38px -32px;}
    
    #box ul li{ width=164px;height:auto;float:left;margin:7px;border:1px solid gray;} //设置li样式,就是每一个人的信息块=文字和照片
    .a-img{height:164px;width:164px;display:block;  overflow:hidden; }
    p a,p span{
        display:block;
        line-height:23px;
        padding-left:10px;
    }
    .bottom{height:40px;line-height:40px;text-align:center;background-color:#ccc;}
    .small{height:50px;width:50px;margin:5px;  float:left;}
</style>

</head>

<body>

<div id="box">
    <div class="top">
        <a href="#" title="列表模式" id="btn1" class="btn-list-off"></a>
        <a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a>
    </div>
    <ul>
        <li>
            <div class="con">
            <a href="#" class="a-img ">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg" />
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li>
         
         <li>
            <div class="con">
            <a href="#" class="a-img">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li><li>
            <div class="con">
            <a href="#" class="a-img">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li>
        <li>
            <div class="con">
            <a href="#" class="a-img">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li><li>
            <div class="con">
            <a href="#" class="a-img">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li><li>
            <div class="con">
            <a href="#" class="a-img">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li>
    </ul>
</div>
</body>
</html>

对不起！我吧代码贴错了！


0 回复 有任何疑惑可以回复我~
收起回答
记得喝水 提问者
2015-11-26 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<style type="text/css">
    *{margin:0px;padding:0px;}
    body{font:"微软雅黑";font-size:14px;}
    a{text-decoration:none;}
    ul,li{list-style:none;}
    #box{height:auto;width:550px;border:1px solid #aaa;margin:0 auto;overflow:hidden;}
    .top{height:40px;}
    .top a{height:16px; width:16px;display:block;float:right;margin:5px;}

    .btn-list-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px 0px;}
    .btn-car-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px -34px;}
    .btn-list-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px 0px;}
    .btn-car-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px -32px;}
    
    #box ul li{height:auto;width:164px;border:1px solid #aaa;float:left;margin:7px;}
    .a-img{height:164px;width:164px;display:block;overflow:hidden;}
    p a,p span{
        display:block;
        line-height:23px;
        padding-left:10px;
    }
    .bottom{height:40px;line-height:40px;text-align:center;background-color:#ccc;}
    .small{height:50px;width:50px;float:left;margin:5px;}
</style>
<script type="text/javascript"> 
   
       // 添加页面加载完成时的事件,然后执行以下代码。
    window.onload=function(){
        var listBtn = document.getElementById("btn1");
        var carBtn = document.getElementById("btn2");       
        // 获取多个图片对象        
         var imgs = document.getElementsByTagName("img");
        listBtn.onclick = function(){
             
        // 改变按钮的class的值
        listBtn.className ="btn-list-on";
        carBtn.className = "btn-car-off";

        // 改变每一个图片的路径以及它的对应的父节点的class的值
        for(var i=0;i<imgs.length;i++){
            imgs[i].src="http://img1.sycdn.imooc.com//53ab7cf4000196c000500050.jpg";
            imgs[i].parentNode.className="small";
        }
 
        }
        carBtn.onclick = function(){ 
            listBtn.className  = "btn-list-off"; 
            carBtn.className = "btn-car-on";      
            for(var i=0;i<imgs.length;i++)
            {
                imgs[i].src = "http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg";
                imgs[i].parentNode.className = "a-img";
            }
        }  

    }
</script>
</head>
 
<body>

<div id="box">
    <div class="top">
        <a href="#" title="列表模式" id="btn1" class="btn-list-off"></a>
        <a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a>
    </div>
    <ul>
        <li>
            <div class="con">
            <a href="#" class="a-img ">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg" />
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li>
         
         <li>
            <div class="con">
            <a href="#" class="a-img">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li><li>
            <div class="con">
            <a href="#" class="a-img">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li>
        <li>
            <div class="con">
            <a href="#" class="a-img">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li><li>
            <div class="con">
            <a href="#" class="a-img">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li><li>
            <div class="con">
            <a href="#" class="a-img">
                <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
            </a>
            <p>
                <a href="#">白阳</a>
                <span>辽宁</span>
                <span>21个共同好友</span>
             </p> 
             </div>
             <div class="bottom">
                 未分组的好友
             </div>
        </li>
    </ul>
</div>
</body>
</html>


0 回复 有任何疑惑可以回复我~
收起回答
#1

记得喝水 提问者

我看了大部分同学都是这个样子，我回去再看看，谢谢您！
2015-11-26 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
信息排列效果
  • 参与学习       31772    人
  • 解答问题       166    个

大咖教您节约网页空间的方法，快速学会信息排列效果的制作

进入课程

问题overflow：hide，隐藏超出部分的图片,这里没有实现了？？

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信