我的圖片正在調整大小，設定的影像應該是 80x80，但它們顯示的是 40x80。我發現消除此問題的唯一方法是擺脫 box-sizing: border-box; 但是，我必須包括邊框框才能遵循我的作業說明。所以，我不能洗掉它。我還使用行內樣式來解決這個問題，使圖片為 133x80。
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee Bar Music</title>
<meta charset="utf-8">
<link href="javajam.css"rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>
<a href="index.html">JavaJam Coffee Bar</a>
</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<main>
<div id="heroguitar"></div>
<h2> Music at JavaJam</h2>
<p>The first Friday night each month at JavaJam is a special night. Join us from 8 pm to 11 pm for some music
you won't want to miss!</p>
<h4>January</h4>
<div class="details">
<a href="melanie.jpg"><img src="melaniethumb.jpg" alt="Thumbnail Picture of Melanie" class="floatleft" height="80" width="80"></a>
<p>Melanie Morris entertains with her melodic folk style</p>
</div>
<h4>February</h4>
<div class="details">
<a href="greg.jpg"><img src="gregthumb.jpg" alt="Thumbnail Picture of Greg" class="floatleft" height="80" width="80"></a>
<p>Tahoe Greg is back from his tour. New songs. New stories.</p>
</div>
</main>
<footer>
Copyright © 2020 JavaJam Coffee Bar <br>
</footer>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.floatleft {
float: left;
padding-right: 2em;
}
uj5u.com熱心網友回復：
使用margin-right而不是padding-right.
* {
box-sizing: border-box;
}
.floatleft {
float: left;
margin-right: 2em;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/437218.html
上一篇：CSS溢位：如何顯示底部元素
下一篇：更改帶有按鈕的框