怎样才能使容器具有相同的尺寸？

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;
}

.btn.upload .cloud {
  box-shadow: 0px 0px #f17d15, 1px 1px #f17d15, 2px 2px #f17d15, 3px 3px #f17d15, 4px 4px #f17d15, 5px 5px #f17d15, 6px 6px #f17d15, 7px 7px #f17d15, 8px 8px #f17d15, 9px 9px #f17d15, 10px 10px #f17d15, 11px 11px #f17d15, 12px 12px #f17d15, 13px 13px #f17d15, 14px 14px #f17d15, 15px 15px #f17d15, 16px 16px #f17d15, 17px 17px #f17d15, 18px 18px #f17d15, 19px 19px #f17d15, 20px 20px #f17d15, 21px 21px #f17d15, 22px 22px #f17d15, 23px 23px #f17d15, 24px 24px #f17d15, 25px 25px #f17d15, 26px 26px #f17d15, 27px 27px #f17d15, 28px 28px #f17d15, 29px 29px #f17d15, 30px 30px #f17d15, 31px 31px #f17d15, 32px 32px #f17d15, 33px 33px #f17d15, 34px 34px #f17d15, 35px 35px #f17d15, 36px 36px #f17d15, 37px 37px #f17d15, 38px 38px #f17d15, 39px 39px #f17d15, 40px 40px #f17d15, 41px 41px #f17d15, 42px 42px #f17d15, 43px 43px #f17d15, 44px 44px #f17d15, 45px 45px #f17d15, 46px 46px #f17d15, 47px 47px #f17d15, 48px 48px #f17d15, 49px 49px #f17d15, 50px 50px #f17d15;
}

.btn.upload .arrow {
  -webkit-animation: uplaod 1s linear infinite;
  animation: uplaod 1s linear infinite;
}

.btn.upload .arrow:after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent #97CA03 transparent;
}

.cloud {
  width: 100px;
  height: 40px;
  position: relative;
  background: #fff;
  display: inline-block;
  border-radius: 50px;
  margin: 60px auto 0;
  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;
}

.cloud:after,
.cloud:before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  top: -20px;
  background: #fff;
  left: 5px;
}

.cloud:before {
  width: 40px;
  height: 40px;
  left: 50px;
}

.arrow {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
  top: 10px;
  width: 15px;
  height: 10px;
  background: #97CA03;
  display: inline-block;
}

.arrow:after {
  content: '';
  position: absolute;
  left: -8px;
  top: 100%;
  border: 15px solid transparent;
  border-top-color: #97CA03;
}

@-webkit-keyframes download {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes download {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
}

@-webkit-keyframes uplaod {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
  }
}

@keyframes uplaod {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
  }
}

<link rel="stylesheet" href="assets/css/templatemo-stand-blog.css">

<img src="logo.png" width="100" height="100" alt="HTML tag">
<p class="bluebackground">&emsp;</p>
<nav>
  <ul class="nav">
    <li class="navlist"><a class="active" href="index.html">Home</a></li>
    <li class="navlist"><a class="active" href="boyshome.html">Boys Campus</a></li>
    <li class="navlist"><a class="active" href="girlshome.html">Girls Campus</a></li>
    <li class="navlist"><a class="active" href="calculator.html">GPA Calculator</a></li>
  </ul>
</nav>
<p class="bluebackground">&emsp;</p>
<br>
<h1 class="girls-message centermess">
  <center>NHS BOYS</center>
</h1>
<nav>
  <p class="bluebackground">&emsp;</p>
  <ul class="nav">
    <li class="navlist"><a class="active" href="boyshome.html">Home</a></li>
    <li class="navlist"><a class="active" href="nhs-articles.html">NHS Articles</a></li>
    <li class="navlist"><a class="active" href="meet-our-officers-boys.html">Meet Our Officers</a></li>
    <li class="navlist"><a class="active" href="boyscontact.html">Contact Us</a></li>
  </ul>
</nav>
<p class="bluebackground">&emsp;</p>
<br>



<center>
  <section class="blog-posts grid-system">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="all-blog-posts">
            <center>
              <div class="row">
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Fitness.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>Fitness</h4>
                      <ul class="post-info">
                        <li>Mohammad Al-Wazzan</li>
                        <li>3/11/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Fitness.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/الأمير.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>الأمير الراحل … أمير الإنسانية</h4>
                      <ul class="post-info">
                        <li>Mohammad Al-Obaidi</li>
                        <li>3/10/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الأمير الراحل … أمير الإنسانية.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Uyghur.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>Uyghur Muslims</h4>
                      <ul class="post-info">
                        <li>Khalid Kooheji</li>
                        <li>27/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Uyghur Muslims.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Corona.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>Corona Virus: A New World</h4>
                      <ul class="post-info">
                        <li>Majed Al-Shaheen</li>
                        <li>27/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Corona Virus A New World.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/اقرأ.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>التعلم عبادة</h4>
                      <ul class="post-info">
                        <li>Omar Sheir</li>
                        <li>23/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/التعلم عبادة.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/الصدقة.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>الصدقة</h4>
                      <ul class="post-info">
                        <li>Ahmad Al-Mazrouei</li>
                        <li>20/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الصدقة.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </center>
          </div>
        </div>
      </div>
    </div>
  </section>
</center>

​

我已经删除了不必要的项目，如页眉和页脚。但是你应该能够看到代码中的一切

Answer 1

在CSS中的某个地方有这条线，最小高度设置为“24 be”，将其更改为45 be，这样就很好了。拉丁字母和阿拉伯字母之间的切换改变了文本的大小，因此它会被向下推高一点。

.blog-posts .down-content {
    padding: 40px;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    min-height: 45em; 
}

Answer 2

这里有些东西，你想看看，如果你是使用flex。这可能是有点长，但它将向您展示的概念，如何灵活盒是强大的。也许您可以用以下代码替换代码

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 3

在您的站点(从该链接)中，在.blog-posts.grid-system -> ..all blog-post -> .row -> .col 4中添加"display:flex“，然后在子元素中添加。down-content，设置为”高度:100%“。

这可能不是最干净的方法，但它是最快的:)而且它正在工作。