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

请大神务必看看小弟的问题,求解惑!!!!!!

这是我自己跟着弄的,为什么*{}中有一行font-family属性会使得本来换行显示的图片(6张书籍图片)变成不换行了?不理解啊。。。。我鼓捣了半天才发现原来是这行代码。。。
把下面的代码复制到index.html文件里面打开,图片用的老师源码中的图片文件,没改名,不过注意引用路径(images文件夹中)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>几米简介</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-size:12px;
            color:#346667;
            /*有下一行,则书籍图片部分才不会换行,为什么?*/
            font-family:Arial, Helvetica, sans-serif,"宋体";
        }
        img{
            margin: 10px 18px;
            border: 1px solid #000000;
        }
        #aa{
        background: url("images/t_book.gif") no-repeat #eff9f9;
        border:4px solid #badbdb;
        padding: 44px 15px 15px;
        }
        #header{width:762px;
            border:4px solid #badbdb;
            background:url(images/banner.gif) no-repeat;
            height:92px;
            text-align:right;
            color:#fff;
        }
        #header a{color:#fff;
            margin:0 5px;
        }
        #middle,#footer{
            width:100%;
        }
        #footer{
            text-align:center; padding:20px 0;
        }
        #content{
            width: 770px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="header">
        <a href="#">联系我们</a>|<a href="#">站点地图</a>
    </div>
    <div id="middle">
        <div id="aa">
            <img src="images/book1.jpg" alt="book1" width="80" height="80"/>
            <img src="images/book2.jpg" alt="book1" width="80" height="80"/>
            <img src="images/book3.jpg" alt="book1" width="80" height="80"/>
            <img src="images/book4.jpg" alt="book1" width="80" height="80"/>
            <img src="images/book5.jpg" alt="book1" width="80" height="80"/>
            <img src="images/book6.jpg" alt="book1" width="80" height="80"/>
        </div>
    </div>
    <div id="footer">
        copyright © 2004-2012 Jimmyspa.com All Rights Reserved.
    </div>
</div>
</body>
</html>

正在回答

3 回答

img标签是行级元素,能够在同一行内从左到右排列

1 回复 有任何疑惑可以回复我~

我也是新手,经过仔细的研究,得出的结论,不知道对不对,紧供你参考。选择字体的时候,每幅图占据的宽度:80px+边框1px*2+外边距18px*2+字体间距(相当于字体有个你看不到的外边框,选择的字体不同,这个距离也不一样,你选择的这个字体是1.5px)2px*1.5=121px。       6张图+#aa的边框+内边距  总的宽度:内边距15px*2+121px*6+4PX*2-1.5px*2(第一张图左边没有字间距,最后一张图的右边没有字间距。不要问我为什么我也不知道,我是实际测量得出的结论)=761px。这个宽度小于#content的770px的宽度,所以一行显示。

不选择字体情况下:每张图占据宽度:80px+边框1px*2+外边距18px*2+字体间距(相当于字体有个你看不到的外边框,选择的字体不同,这个距离也不一样,不选择字体默认为3px)3px*2=124px。

当你没有设置字体时候的总宽度:15px*2+124px*6+4px*2-6px(不选择字体情况下默认的字间距为3px,这里的-3px请参照上面的计算公式)=776px。这个宽度大于770px了,所以最后一张图片换行了。

选择字体的时候,6张图片不是居中的,要偏左侧一点。

如果把图片宽度设置成79px,在不选择字体的种情况下6张图片占据的宽度加上内边距和边框的宽度正好是770px,这个时候6张图片是居中的。你可以自己改一下看看。

我也是新手,花了几天小时研究出来的,也不知道是否正确,还请大神们给指导一下。

1 回复 有任何疑惑可以回复我~
#1

粤川_shu

这是对的,不要忽略字体占用的像素,除了该图片的宽度也可用用 font-size改字体大小 和 letter-spacing 该字间距
2016-01-22 回复 有任何疑惑可以回复我~

不知道感觉和line-height有关

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页布局基础
  • 参与学习       214705    人
  • 解答问题       1756    个

让你精通CSS中三大定位机制,彻底掌握网页布局的相关知识

进入课程

请大神务必看看小弟的问题,求解惑!!!!!!

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