无法在CSS / HTML中将文字放在图片旁边

问题描述 投票:0回答:1

我已经使用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>

The output of the code

这里是完整代码:

<!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>

html css css-float css-position
1个回答
0
投票

请勿使用浮点数。您将要使用flexbox

© www.soinside.com 2019 - 2024. All rights reserved.