html - 我有 3 种不同大小的文本，下面有自己的图像，增加了高度以对齐它们，但是当它的移动版本之间有很大的差距

Question

我收到了 3 篇新闻文章，每篇文章下面都有自己的图片。问题是文本是引号并且大小不一。所以他们没有对齐，添加了适用于桌面版本的高度 px，但是当它进入移动版本时，高度显然仍然存在，并且在文章之间产生了很大的奇怪差距。

<div style="padding-top:50px;" class="container">
<div class="card-deck">
<div class="col-sm-4">
<div class="card" style="margin:0!important;border:none;">
<div class="card-body">
<p style="text-align:center" class="card-text">"With an impressive and evergrowing number of studies finding CBD to be a powerful antioxidant and anti-inflammatory among many other properties, it is now being used to treat pain, anxiety, spasms, and much more"</p>
</div>
<img class="card-img-top" src="img\quote_pic1.png" alt="Daily Mail" style="width:50%;height:40px;margin:auto;">
</div>
</div>

<div class="col-sm-4">
<div class="card" style="margin:0!important;border:none;">
<div class="card-body">
<p style="text-align:center" class="card-text">“I think there is a legitimate medicine here,” he said. “We’re talking about something that could really help people.” Neurosurgeon Dr. Sanjay Gupta</p>
</div>
<img class="card-img-top" src="img\quote_pic2.png" alt="World Health Organization" style="width:50%;height:40px;margin:auto;">
</div>
</div>

<div class="col-sm-4">
<div class="card" style="margin:0!important;border:none;">
<div class="card-body">
<p style="text-align:center" class="card-text">Dr. Esther Blessing, an associate professor of psychiatry at New York University says  current evidence suggests that CBD shows promise for helping to treat everything from Anxiety to PTSD</p>
</div>
<img class="card-img-top" src="img\quote_pic3.png" alt="The Washington Post" style="width:80%;height:40px;margin:auto;">
</div>
</div>
</div>
</div>

手机版差距大

标签： htmlcssbootstrap-4

Answer 1

我建议删除列。您在卡片组中，您可以在 CSS 中设置每行/列显示多少张卡片。

此外，我删除了margin:0!important;border:none;as 1) inline is not great, 2)这可以通过内置的 Bootstrap 样式m-0和border-0. 还text-center消除了对<p>标签进行内联居中的需要。

这是结果...（添加了图像，以便我可以看到实际图像的显示方式）

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container pt-5">
  <div class="card-deck">
    <div class="card m-0 border-0">
      <div class="card-body">
        <p class="card-text tex-center">"With an impressive and evergrowing number of studies finding CBD to be a powerful antioxidant and anti-inflammatory among many other properties, it is now being used to treat pain, anxiety, spasms, and much more"</p>
      </div>
      <img class="card-img-top mx-auto" src="https://dummyimage.com/100x50/fff/000&text=LOGO" style="max-width: 40%;" alt="Daily Mail">
    </div>

    <div class="card m-0 border-0">
      <div class="card-body">
        <p class="card-text tex-center">“I think there is a legitimate medicine here,” he said. “We’re talking about something that could really help people.” Neurosurgeon Dr. Sanjay Gupta</p>
      </div>
      <img class="card-img-top mx-auto" src="https://dummyimage.com/100x50/fff/000&text=LOGO" style="max-width: 40%;" alt="World Health Organization">
    </div>

    <div class="card m-0 border-0">
      <div class="card-body">
        <p class="card-text tex-center">Dr. Esther Blessing, an associate professor of psychiatry at New York University says current evidence suggests that CBD shows promise for helping to treat everything from Anxiety to PTSD</p>
      </div>
      <img class="card-img-top mx-auto" src="https://dummyimage.com/100x50/fff/000&text=LOGO" style="max-width: 40%;" alt="The Washington Post">
    </div>
  </div>
</div>