Question

我正在尝试为网站设计创建3列布局，在每列顶部包含一个图像，然后是h3和一些文本。我已经在html中完成了此操作，但是当我进入CSS时，即使将它们都设置为0，也会有填充/边距。

由于某些原因，列未正确垂直对齐？

HTML：

<h3>Why You Should Choose Us For Financing Options.</h3>
<div class="card">
  <img src="Heart.png" alt="Heart">
  <h5>Lowest Industry Rates</h5>
  <p>We take pride in our rates being the lowest in the industry!</p>
</div>
<div class="card">
  <img src="Coin.png" alt="Coin">
  <h5>Our Funding Is Fast</h5>
  <p>After completing our form, you can expect to receive your funding within 48 hours!</p>
</div>
<div class="card">
  <img src="File.png" alt="File">
  <h5>We're Quick And Easy</h5>
  <p>The form is easy to understand and can be completed in minutes!</p>
</div>

CSS：

header h3 {
  font-family: 'Montserrat Light', sans-serif;
  font-size: 25px;
  color: #FFF;
  margin-top: 60px;
}

.card {
  display: inline-block;
  width: 260px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  margin-top: 60px;
}

预期结果的图像：https://i.gyazo.com/f4a2ef3a9680a1ee79eaafd889d368b7.png

当前结果： https://i.gyazo.com/fd2eafc6a980527a07811e409a9262bd.png

Answer 1

尝试一下：

HTML：

<h3>Why You Should Choose Us For Financing Options.</h3>
<div id="fc">
    <div class="card">
        <img src="Heart.png" alt="Heart">
        <h5>Lowest Industry Rates</h5>
        <p>We take pride in our rates being the lowest in the industry!</p>
    </div>
    <div class="card">
        <img src="Coin.png" alt="Coin">
        <h5>Our Funding Is Fast</h5>
        <p>After completing our form, you can expect to receive your funding within 48 hours!</p>
    </div>
    <div class="card">
        <img src="File.png" alt="File">
        <h5>We're Quick And Easy</h5>
        <p>The form is easy to understand and can be completed in minutes!</p>
    </div>
</div>

CSS：

header h3 {
    font-family: 'Montserrat Light', sans-serif;
    font-size: 25px;
    color: #FFF;
    margin-top: 60px;
}

#fc {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.card {
    display: inline-block;
    min-width: 260px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    margin-top: 60px;
}

填充/边距出现在3列布局中不应有的位置

1 个答案: