亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

藍山帝景 2023-05-11 10:08:36
我有這個網站： 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;}我已經刪除了不必要的項目，例如頁眉和頁腳。但是你應該能夠用代碼看到一切
查看完整描述

2 回答

?
慕桂英4014372

TA貢獻1871條經驗 獲得超13個贊

如果您正在使用 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;

}



查看完整回答
反對 回復 2023-05-11
?
大話西游666

TA貢獻1817條經驗 獲得超14個贊

在你的 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; 

}


查看完整回答
反對 回復 2023-05-11
  • 2 回答
  • 0 關注
  • 130 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號