請大神務必看看小弟的問題，求解惑?。。。。?！

這是我自己跟著弄的，為什么*{}中有一行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>

Justicer_P

2015-03-12

源自：網頁布局基礎 2-7

關注問題我要回答

794

操作

收起

3 回答

覺非夜
2015-12-13

img標簽是行級元素，能夠在同一行內從左到右排列

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

收起回答

qq_心中有塵_0
2015-06-06

我也是新手，經過仔細的研究，得出的結論，不知道對不對，緊供你參考。選擇字體的時候，每幅圖占據的寬度：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張圖片是居中的。你可以自己改一下看看。

我也是新手，花了幾天小時研究出來的，也不知道是否正確，還請大神們給指導一下。