如何使容器具有相同的大小？

Question

我有这个网站： https: //acanhs.org/nhs-articles.html 出于某种原因，容器都有不同的尺寸。我怎样才能让他们都一样，使我的网站更具视觉吸引力。这是我的 HTML：img.article {  float: left;  width: 300px;  height: 300px;  object-fit: cover;}a:link {  color: Black;  background-color: transparent;  text-decoration: none;}a:visited {  color: Black;  background-color: transparent;  text-decoration: none;}a:hover {  color: Black;  background-color: transparent;  text-decoration: none;}a:active {  color: Black;  background-color: transparent;  text-decoration: none;}</style><title>Stand Blog Posts</title><link href="bootstrap.min.css" rel="stylesheet"><style>.btn {  width: 150px;  height: 150px;  background: #ddd;  position: relative;  text-align: center;  margin: 15px;  overflow: hidden;  border-radius: 100%;  display: inline-block;}.btn.download {  background: #00CCFF;}.btn.download .cloud {  box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;}.btn.download .arrow {  -webkit-animation: download 1s linear infinite;  animation: download 1s linear infinite;}.btn.upload {  background: #F49845;}我已经删除了不必要的项目，例如页眉和页脚。但是你应该能够用代码看到一切

Answer 1

如果您正在使用 flex，这里有一些您想看的东西。它可能有点长，但它会向您展示 flex box 的强大功能。也许你可以用这个替换你的代码

HTML

<ul class="list">

  <li class="list-item">

    <div class="list-content">

      <h2>Title</h2>

      <img src="http://baconmockup.com/250/200" alt="" />

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>

      <a href="">Link</a>

    </div>

  </li>

    

     <li class="list-item">

    <div class="list-content">

      <h2>Title</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>

      <a href="">Link</a>

    </div>

  </li>

  

  <li class="list-item">

    <div class="list-content">

      <h2>Title</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>

      <a href="">Link</a>

    </div>

  </li>

  

  <li class="list-item">

    <div class="list-content">

      <h2>Title</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur optio ipsa fuga vel repudiandae impedit illum delectus nihil error animi nobis quaerat quidem, amet, praesentium aspernatur inventore numquam! Totam, dolorem inventore reprehenderit, culpa obcaecati!</p>

      <a href="">Link</a>

    </div>

  </li>

  

  <li class="list-item">

    <div class="list-content">

      <h2>Title</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste, numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur explicabo optio ducimus officia blanditiis voluptas possimus veniam maxime!</p>

      <a href="">Link</a>

    </div>

  </li>

  

    <li class="list-item">

    <div class="list-content">

      <h2>Title</h2>

      <img src="http://baconmockup.com/250/200" alt="" />

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestiae esse dolore corporis velit fugiat ipsam tempore optio dicta. Magnam iusto facere, maxime! Praesentium quo laborum, deserunt adipisci. Ipsam officia delectus repudiandae, aperiam magnam blanditiis fuga similique.</p>

      <a href="">Link</a>

    </div>

  </li>

</ul>

CSS

* {

  box-sizing: border-box;

}

body {

  background-color: #f5f5f5;

  margin: 0 auto; 

  max-width: 60em;

  line-height: 1.3;

}

ul, li {

  margin: 0;

  padding: 0;

  list-style: none;

}

img {

  width: 100%;

}

h2 {

  margin-top: 0;

  margin-bottom: 0.4em;

}

/*Flex items*/

.list {

  display: flex;

  flex-wrap: wrap;

}

.list-item {

    display: flex; 

  padding: 0.5em;

    width: 100%;

}

@media all and (min-width: 40em) {

  .list-item {

    width: 50%;

  }

}

@media all and (min-width: 60em) {

  .list-item {

    width: 33.33%;

  }

}

.list-content {

    background-color: #fff;

  display: flex;

  flex-direction: column;

  padding: 1em;

    width: 100%;

}

.list-content p {

    flex: 1 0 auto;

}

Answer 2

在你的 CSS 中某处有这一行，最小高度设置为“24em”，将其更改为 45em 就可以了。拉丁字母和阿拉伯字母之间的切换改变了文本的大小，因此它被向下和向上推了一点。

.blog-posts .down-content {

    padding: 40px;

    border-right: 1px solid #eee;

    border-left: 1px solid #eee;

    border-bottom: 1px solid #eee;

    min-height: 45em; 

}