三等高图像和标语不起作用

Question

我有下面的代码和一个屏幕附加。

正如你所看到的，有3的图像和标题，但他们没有对齐，他们的填充是相同的。

整个部分在左边，从右边有很大的空间。

知道如何使它们在高度和宽度上相等吗？

​

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" integrity="sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="section-top-homepage">
  <!-- vission -->
  <div class="col-md-4 col-sm-4">
    <div class="whitecolor">
      <img alt="" data-entity-type="file" data-entity-uuid="3afd4d82-63ca-4046-b77c-1d3815e959cf" src="/tilesw/sites/default/files/inline-images/vision.svg" />
      <h3 class="top25">Vision</h3>
    </div>
  </div>


  <!-- objectives -->

  <div class="col-md-4 col-sm-4">
    <div class="whitecolor">

      <img alt="" data-entity-type="file" data-entity-uuid="6e0a289f-a866-4d46-81c8-6f2f6aceecd8" src="/tilesw/sites/default/files/inline-images/objectives.svg" />
      <h3 class="top25">Objectives</h3>

    </div>
  </div>
  <!-- mission -->

  <div class="col-md-4 col-sm-4">
    <div class=" whitecolor">

      <img alt="" data-entity-type="file" data-entity-uuid="aeaa7c28-c987-4174-a2c2-5fa45de0ab83" src="/tilesw/sites/default/files/inline-images/mission.svg" />
      <h3 class="top25">Mission</h3>

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

​

​

​

Answer 1

我使用引导程序，但是显示这三个图标的红色部分有以下代码，我认为这些代码影响了整个行内容的组织。

section#block-counterboxstyle3 { 
    display: block;
    box-sizing: border-box;
    height: 300px;
    background-color: #e00021;
    clip-path: ellipse(550% 100% at 400% 100%);
    margin-top: -200px;
}

Answer 2

你用的是引导吗？

当您设置一个类，如col-4，您只设置每个区域的宽度，您需要设置一个最大高度的css或标签IMG使用高度。

示例：

Answer 3

使用id id="section-top-homepage将包装div的宽度设置为页面的100%。您可以通过将其边框设置为1px solid red来确认这一点。这对我有用。