我已经使用HTML和CSS几个月了,作为我网站的一部分,我开了个玩笑的假冒销售网站。我有点像将其放在Amazon页面上,在标题的左侧,左侧为图片,右侧为标题,右侧为产品说明。现在是的,我知道您在查看我的代码“他甚至还没有对他的描述做任何事情!”的想法,那里什么也没有,因为我很生气并且摆脱了我的CSS描述。您可以看到用于将CSS及其它放置在其中的类.description
。我尝试过将其向右浮动(无效),向右浮动,然后使用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>
请勿使用浮点数。您将要使用flexbox