Question

我希望以这样一种方式对齐我的图像：使用HTML将2张图像放在其他2张图像之上，如图所示，每张图像下方都有一些文字。

上面代码中Steve Jobs的图像是完全对齐的，但现在我想要特斯拉的图像就在它旁边，下面有一些文字。然后在这两个图像的正下方以相同的方式添加另外2个图像。有人可以告诉我该怎么做吗？

这是我的HTML代码：

<body style="background-color:#232122">
  <strong><h2 style="color:#FFFFFF"><i><center>We are comfortable being the geniuses behind the scenes <br/> but sometimes people want to know who we are</center></strong>
  </i>
  </h2>
  <hr/>

  <h2 style="background-color:#FAAE3D;color:#BF360C;border-radius:20px">
    <center>About</center>
  </h2>
  <p style="color:#BF360C;margin-left:3em;margin-right:5em;border:3px solid #FAAE3D;border-radius:20px;border-left:5px;border-right:5px;border-spacing:10px;padding:10px">Armour was developed by some of the most dashing, kick-ass and the smartest people on this planet (didnt even boast about it, you see!!) as a part of their final year project. But as we grew, amazing people like you hopped in the ride and our family
    grew bigger and bigger. We are basically a security-providing company. I know that is likely over-simplified but is still better than a long list of descriptors. We make Bluetooth-based doorlocks that run on Android platforms and provide an added
    layer of biometric security (I use these jargons so that some dumbshits feel like they are reading the orthodox "about-us" page, what i am really saying is we use fingerprints as an added security measure, thats it, folks!)</p>

  <h2 style="background-color:#80BD9E;color:#26382F;border-radius:20px">
    <center>Meet Team Awesome</center>
  </h2>
  <p style="color:#80BD9E;margin-left:3em;margin-right:5em;border:3px solid #80BD9E;border-radius:20px;border-left:5px;border-right:5px;border-spacing:10px;padding:10px"><img src="jobs.jpg" style="float:top;width:250px;height:200px"><strong><br>Steve Jobs<br>CEO<br></strong>
    <img src="tesla.jpg" style="float:top;width:250px;height:200px;"><strong><br>Nicola Tesla<br>COO</strong>
  </p>

  <hr/>
  <a href="https://www.facebook.com/Armour-2082718525306755/" title="Redirect to facebook page"><img src="fb.png" style="width:50px;height:50px"></a>
  <a href="https://www.youtube.com/Armour-2082718525306755/" title="Redirect to youtube page"><img src="youtube.png" style="width:50px;height:50px"></a>
  <a href="https://www.twitter.com/Armour-2082718525306755/" title="Redirect to twitter page"><img src="twitter.png" style="width:50px;height:50px"></a>
</body>

Answer 1

将每个图像和相应的文本放在div中，然后使用CSS

进行定位

julia script.jl

我希望以这样的方式对齐我的图像，其中2个图像使用html高于其他2个图像，如图所示，每个图像下方都有一些文字

1 个答案: