首页新闻找找看学习计划

display:block与div的区别?

0
悬赏园豆:30 [已解决问题] 解决于 2015-03-12 21:51

前端新手求教!

首先看下我的代码:

<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>我的相册</title>

         <style type="text/css">
            body {
                font-family: "Helvetica","Arial",sans-serif;
                color: #333;
                background-color: #ccc;
                margin: 1em 10%;
            }
            h1 {
                color:#333;
                background-color: transparent;
            }
            a {
                color:#c60;
                background-color: transparent;
                font-weight: bold;
                text-decoration:none;
            }
            li {
                float: left;
                padding: 1em;
                list-style: none;
            }
            img {
                clear:both;
                display: block;
            }
         </style>
    </head>
    <body>
        <h1>我的相册</h1>
        <ul>
            <li>
                <a href="images/pig.png" title="I'm pig!" onclick="showPic(this);return false;">Pig</a>
            </li>
            <li>
                <a href="images/rabit.png" title="I'm rabit!" onclick="showPic(this);return false;">Rabit</a>
            </li>
            <li>
                <a href="images/house.png" title="I'm house!" onclick="showPic(this);return false;">house</a>
            </li>
            <li>
                <a href="images/monkey.png" title="I'm monkey!" onclick="showPic(this);return false;">monkey</a>
            </li>
        </ul>
        
        <img id="placeHolder" alt="image" src="images/pig.png"/>
        
        <p id="description">Choose an image.</p>

        <script type="text/javascript">
            function showPic(whichPic){
                var source = whichPic.getAttribute("href");
                var placeHolder = document.getElementById("placeHolder");
                placeHolder.setAttribute("src",source);

                var text = whichPic.getAttribute("title");
                var description = document.getElementById("description");
                console.log(description);
                description.firstChild.nodeValue = text;
            }
        </script>
    </body>
</html>
View Code

主要目的是让img另起一行,但是由于我对li使用了float。

 

因此img需要添加样式:

clear:both清除浮动

display:block 转换成块级元素

 

问题来了,既然是转换成块级元素,img才能另起一行。

那么我用div把img包起来,也是相当于一个新的块级元素。

但是却没有达到换行的效果?为什么?

 

【div包起来】的这种块级元素,和img【使用display:block转换成的块级元素】有什么不同?

xingoo的主页 xingoo | 小虾三级 | 园豆:709
提问于:2015-03-12 21:40
< >
分享
最佳答案
0

原来div可以达到效果的,只是我在用div包起来的时候,没有对div使用clear:both,因此div仍然有float的效果。

xingoo | 小虾三级 |园豆:709 | 2015-03-12 21:50
其他回答(1)
1

大家都是块, 有什么不同的呢。  div默认就是块

收获园豆:30
问天何必 | 园豆:3291 (老鸟四级) | 2015-03-12 21:48
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册