Question

我通过这个网站阅读并试用了Table and Div，但无法让它发挥作用。我试图将Love和KISS横幅放在彼此旁边，但在GEMINI横幅下面。

提前谢谢

<style>
     #banner {
      float:left;
    width: 250px; 
    height: 100%;
    margin:5px;
      border-style: ridge;
      border-width: 5px;
      border-color: Black;
      border-radius: 5px;
      }
      #decal {
      float:left;
    width: 315px; 
    height: 100%px;
    margin:5px;
      border-style: ridge;
      border-width: 5px;
      border-color: Black;
      border-radius: 5px;
      }
	  #container
	  {float:left;}
     
     h1 {color:Navy;}
     p {color:blue;}

    </style>

<!DOCTYPE html>
<html>
  <head>
        
    </head>
<body>
  <h1 align="center">Hello Everyone</h1><b></b>
  <h1> I make these products at home ......................</h1>

 

<div id="container">
 <p style="float: left; clear: left ; color:Navy;  font-size: 25px; font-weight: bold"> <a href="https://www.ebay.com/itm/Rhinestone-Astrology-Zodiac-Hologram-Transfer-Wall-Door-hanging-banner-Decor/173147311152?hash=item2850624c30:m:m1lD96x8rl5FMF0llP3o25Q" target="_blank"><img id="banner" src="https://static.wixstatic.com/media/6d9a3c_bc83ead683b84d2ea54a399f65ea8f7c~mv2.jpg/v1/fill/w_386,h_540,al_c,q_90,usm_0.66_1.00_0.01/6d9a3c_bc83ead683b84d2ea54a399f65ea8f7c~mv2.jpg" alt="Gemini" width="500" height="600"></a></a>To see your birth month please click on <br>the image and you can choose your birth month from a drop down menu</p>
  </div>

<div>
<a href="https://www.ebay.com/itm/Red-Lips-I-Love-You-Rhinestone-vinyl-Transfer-Wall-Door-hanging-banner-Decor/173147413072?hash=item285063da50:g:6WoAAOSwJ6lahbb6" target="_blank"><img id="banner" src="https://static.wixstatic.com/media/6d9a3c_41123304ce174617b18badf14b55e68f~mv2.jpg/v1/fill/w_414,h_540,al_c,q_90,usm_0.66_1.00_0.01/6d9a3c_41123304ce174617b18badf14b55e68f~mv2.jpg" alt="I Love You Banner" width="500" height="600"></a>

<a  href="https://www.ebay.com/itm/Red-Lips-I-Love-Kiss-Rhinestone-vinyl-Transfer-Wall-Door-hanging-banner-Decor/173147484231?hash=item285064f047:m:mIqlDr1IjHETWbRSgG1aysg" target="_blank"><img id="banner" src="https://static.wixstatic.com/media/6d9a3c_40b0278c04934ae78669965d5cac7cf8~mv2.jpg/v1/fill/w_414,h_540,al_c,q_90,usm_0.66_1.00_0.01/6d9a3c_40b0278c04934ae78669965d5cac7cf8~mv2.jpg" alt="I Love You Banner" width="500" height="600"></a>
  </div>



</body>
</html>

提前谢谢

Answer 1

我认为你不需要漂浮任何东西。默认情况下，<a>代码和<img>代码会以内嵌方式显示，因此它们会并排显示。只需将第一个图像包裹在<div>（这是一个块元素）中就可以将它分开在它自己的行上。

body {
  color: Navy;
  font-size: 25px;
  font-weight: bold;
}

.banner {
  width: 250px;
  height: 100%;
  margin: 5px;
  border-style: ridge;
  border-width: 5px;
  border-color: Black;
  border-radius: 5px;
}

<h1>Hello Everyone</h1>
<h1> I make these products at home ......................</h1>

<div>
  <a href="">
    <img class="banner" src="https://static.wixstatic.com/media/6d9a3c_bc83ead683b84d2ea54a399f65ea8f7c~mv2.jpg/v1/fill/w_386,h_540,al_c,q_90,usm_0.66_1.00_0.01/6d9a3c_bc83ead683b84d2ea54a399f65ea8f7c~mv2.jpg" alt="Gemini" width="500" height="600">
  </a><br>
  To see your birth month please click on the image and you can choose your birth month from a drop down menu
</div>

<div>
  <a href="">
    <img class="banner" src="https://static.wixstatic.com/media/6d9a3c_41123304ce174617b18badf14b55e68f~mv2.jpg/v1/fill/w_414,h_540,al_c,q_90,usm_0.66_1.00_0.01/6d9a3c_41123304ce174617b18badf14b55e68f~mv2.jpg" alt="I Love You Banner" width="500" height="600">
  </a>
  <a href="">
    <img class="banner" src="https://static.wixstatic.com/media/6d9a3c_40b0278c04934ae78669965d5cac7cf8~mv2.jpg/v1/fill/w_414,h_540,al_c,q_90,usm_0.66_1.00_0.01/6d9a3c_40b0278c04934ae78669965d5cac7cf8~mv2.jpg" alt="I Love You Banner" width="500" height="600">
  </a>
</div>

修改

要在元素周围流动文本，您可能需要浮动元素：

body {
  color: Navy;
  font-size: 25px;
  font-weight: bold;
}

.banner {
  display: inline-block;
}

.banner img {
  display: block;
  width: 250px;
  height: 100%;
  margin: 5px;
  border-style: ridge;
  border-width: 5px;
  border-color: Black;
  border-radius: 5px;
}

.banner_left {
  float: left;
}

div {
  clear: both;
}

<h1>Hello Everyone</h1>
<h1> I make these products at home ......................</h1>

<div>
  <a href="" class="banner banner_left">
    <img class="banner" src="https://static.wixstatic.com/media/6d9a3c_bc83ead683b84d2ea54a399f65ea8f7c~mv2.jpg/v1/fill/w_386,h_540,al_c,q_90,usm_0.66_1.00_0.01/6d9a3c_bc83ead683b84d2ea54a399f65ea8f7c~mv2.jpg" alt="Gemini" width="500" height="600">
  </a>To see your birth month please click on the image and you can choose your birth month from a drop down menu
</div>

<div>
  <a href="" class="banner">
    <img src="https://static.wixstatic.com/media/6d9a3c_41123304ce174617b18badf14b55e68f~mv2.jpg/v1/fill/w_414,h_540,al_c,q_90,usm_0.66_1.00_0.01/6d9a3c_41123304ce174617b18badf14b55e68f~mv2.jpg" alt="I Love You Banner" width="500" height="600">
  </a>
  <a href="" class="banner">
    <img src="https://static.wixstatic.com/media/6d9a3c_40b0278c04934ae78669965d5cac7cf8~mv2.jpg/v1/fill/w_414,h_540,al_c,q_90,usm_0.66_1.00_0.01/6d9a3c_40b0278c04934ae78669965d5cac7cf8~mv2.jpg" alt="I Love You Banner" width="500" height="600">
  </a>
</div>

如何将图像放在彼此之下？

1 个答案:

修改