时间戳

首页 > 解决方案 > 如何让块图像并排 HTML？

html - 如何让块图像并排 HTML？

问题描述

如果这是重复的，请原谅我，我还是 HTML 的新手，但在谷歌搜索了一段时间后我无法解决这个问题。

我正在使用 2 个块图像来显示以下内容。

在此处输入图像描述

但我试图让这些块像这样并排。

在此处输入图像描述

这是我的代码。

<div style="text-align:center;">
  <div style="display:inline-block;">
    <div class="wp-block-image">
      <center>
        <figure class="aligncenter size-full">
          <a href="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" target="_blank" rel="noopener">
            <img loading="lazy" width="517" height="261" src="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" alt="" class="wp-image-5379">
          </a>
          <br>
          <figcaption>
            <b><u><font size="+2">
              <a href="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png">Dashboard Example 1</a>
          </font size>
          </b></u>
          </figcaption>
        </figure>


      </center>
    </div>

    <div class="wp-block-image">
      <center>
        <figure class="aligncenter size-full">
          <a href=https://www.geckoboard.com/uploads/CEO-dashboard-geckoboard.png " target="_blank " rel="noopener ">
          <img loading="lazy " width="517 " height="261 " src="https://www.geckoboard.com/uploads/CEO-dashboard-geckoboard.png " alt=" " class="wp-image-5379 ">
          </a> 
            <br>
          <figcaption>
          <b><u><font size="+2 ">
              <a href="https://www.geckoboard.com/uploads/CEO-dashboard-geckoboard.png ">Dashboard Example 2</a>
          </font size>
          </b></u></figcaption></figure>
          
          
    </center>
    </div>
    </div>
    </div>

标签： html

解决方案

<a>我在您的一个路径中添加了一个缺少的引号并添加display: inline-block到两个图像容器 div 中。在整页中查看片段结果以并排查看它们。

关于您关于更改图像间距的评论 - 该<figure>标签具有以下默认 css 值：

display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;

您可以通过各种方式覆盖此默认 css。我喜欢创建一个具有我想要的样式的类，然后将该类添加到我希望应用新的 css 值的任何元素中。

一个重要的步骤是使您的 css 选择器比默认选择器更具体。

使用更具体的规则。通过在您选择的元素之前指示一个或多个元素，规则变得更加具体并获得更高的优先级

<div style="text-align:center;">
  <div style="display:inline-block;">
    <div class="wp-block-image" style="display:inline-block;">
      <center>
        <figure class="aligncenter size-full">
          <a href="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" target="_blank" rel="noopener">
            <img loading="lazy" width="517" height="261" src="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" alt="" class="wp-image-5379">
          </a>
          <br>
          <figcaption>
            <b><u><font size="+2">
              <a href="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png">Dashboard Example 1</a>
          </font size>
          </b></u>
          </figcaption>
        </figure>


      </center>
    </div>

    <div class="wp-block-image" style="display:inline-block;">
      <center>
        <figure class="aligncenter size-full">
          <a href="https://www.geckoboard.com/uploads/CEO-dashboard-geckoboard.png " target="_blank " rel="noopener ">
            <img loading="lazy " width="517 " height="261 " src="https://www.geckoboard.com/uploads/CEO-dashboard-geckoboard.png " alt=" " class="wp-image-5379 ">
          </a>
          <br>
          <figcaption>
            <b><u><font size="+2 ">
              <a href="https://www.geckoboard.com/uploads/CEO-dashboard-geckoboard.png ">Dashboard Example 2</a>
          </font size>
          </b></u>
          </figcaption>
        </figure>


      </center>
    </div>
  </div>
</div>

推荐阅读