我已经做了几个月的 HTML 和 CSS，作为我网站的一部分，我制作了一个开玩笑的假冒销售网站。我有点基于亚马逊页面，左边是图片，右边是标题，右边是标题下方的产品描述。现在是的，我知道你在看我的代码时在想什么“他甚至没有对他的描述做任何事情!”，好吧，那里什么也没有，因为我很生气并摆脱了描述的 CSS。您可以看到一个类 .description 用于放置 CSS 和其他内容。我试过将它向右浮动(它不起作用)，向右浮动然后使用 padding 将它推向某个方向(它不起作用)，E.T.C.如果你想要完整的代码，我会把它放在底部或其他地方。请告诉我如何在标题下获取我的描述？
(对于这段代码，我删除了一些不必要的部分)
<!DOCTYPE html>
<html>
<head>
<title>merch for sale</title>
<style>
#merch{
float:right;
padding-right:100px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.description{
}
</style>
</head>
<body>
<h1>
<div id="merch">
Hamsterlover606 merchandise for sale
</div>
</h1>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</body>
</html>
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Hamsterlover merch for sale</title>
<style>
#merch{
float:right;
padding-right:100px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.description{
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="buy.html">Buy</a>
<a href="sell.html">Sell</a>
<a href="about.html">About</a>
</div>
<h1>
<div id="merch">
Hamsterlover606 merchandise for sale
</div>
</h1>
<a href="pic1.html" target="_blank"><img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500"></a>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</body>
</html>
最佳答案
使用 div 对您的代码进行排序和分组。尝试将页面上的元素想象成一个框中的不同组，并为每个组创建一个 div。
要使带有文本的 div 紧挨着图像显示，请使图像 float: left。
` <!DOCTYPE html>
<html>
<head>
<title>Hamsterlover merch for sale</title>
<style>
#merch{
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
#img {
float: left;
}
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="buy.html">Buy</a>
<a href="sell.html">Sell</a>
<a href="about.html">About</a>
</div>
<div id="img">
<a href="pic1.html" target="_blank"><img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500"></a>
</div>
<div>
<h1>
Hamsterlover606 merchandise for sale
</h1>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</div>
</body>
</html>`
关于html - 无法在 CSS/HTML 中将文本放在图像旁边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59220163/