时间戳

首页 > 解决方案 > 如何使体育场盒子的高度相互成比例？（HTML 和 CSS）

html - 如何使体育场盒子的高度相互成比例？（HTML 和 CSS）

问题描述

第一排有两个体育场包厢，第二排有三个体育场包厢。理想情况下，所有框的高度将相对于它们各自的行彼此成比例。

第一行的前两个框的高度应该相同，第二行的三个框的高度应该相同。

根据盒子所在的行，使盒子的高度彼此成比例的最佳方法是什么？

我尝试在每个“p”标签之间添加中断语句以在文本中添加一个空格，但这会导致体育场框在调整屏幕大小或在平板电脑模式下查看时变得不均匀。

我还尝试在 .review-col 和 .review-col-2 类的 height 属性中使用 vh 测量值，但这会导致在调整屏幕大小时文本有时会超出体育场框的边界。

这是上下文的图片。

在此处输入图像描述

HTML

<html>
   
    <div class="review-row">
        <div class="review-col">
            <div class="icon">
                <img src="images/facials.PNG">
                <div class="user-info">
                    <h4>Facials</h4>
                </div>
           </div>
                <p>Custom Facials<br>
                  Custom Chemical Peel Facials<br>
                  Image O2 Lift Facial<br>
                  Galvanic Facial<br>
                  Circadia Oxygen RX Facial<br>
                  Dermaplaning Facial<br>
                  Microdermabrasion Facial<br>
                  Microneeding Facial<br>
                  Fox C Peel Facial<br>
                  Plamere Skin Tightening Facial<br>
                  Plasma Fusion Facial<br>
                  FCR Facial
                  </p>
        </div>

        <div class="review-col">
            <div class="icon">
                <img src="images/skin_solutions.PNG">
                <div class="user-info">
                    <h4>Skin Care Solutions</h4>
                </div>
            
            </div>
                  <p>Skin Tags<br>
                  Cherry Angiomas<br>
                  Sebacious Hyperplasia<br>
                  Fibromas<br>
                  Seborrheic Keratosis<br>
                  Flat Hyperigmentation<br>
                  Acne Lesions<br>
                  Milias<br>
                  Closed Comedones<br>
                  Cappillaries
                  </p>
        </div>
</div>

<div class="review-row-2">
        <div class="review-col-2">
            <div class="icon">
                <img src="images/lash.PNG">   
                <div class="user-info">
                    <h4>Custom Lashes</h4>
                </div>
            </div>
                  <p>Full Set of Classic and Volume Lash Extension<br>
                  Lash Extension Fill<br>
                  Lash Extension Removal<br>
                  Lash Lift and Tint<br>
                  </p>
          </div>
          <div class="review-col-2">
              <div class="icon">
                <img src="images/microblading.PNG">
                <div class="user-info">
                    <h4>Microblading</h4>
                </div>
              </div>
                <p>Permanent Eyebrow Tattoo Techinque
                </p>
          </div>
                <div class="review-col-2">
                <div class="icon">
                  <img src="images/eyebrow_treatment.PNG">
                <div class="user-info">
                    <h4>Eyebrow Treatment</h4>
                </div>
            </div>
                    <p>Eyebrow Waxing<br>
                    Eyebrow Tint
                    </p>
            </div>
      </div>

</section>
</html>

CSS


.review-row{
    width: 90%; /*changes the width of the box*/
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.review-row-2{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
.review-col{
    flex-basis: 33%; /*36.3*/
    padding: 20px;
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: 30px;
    box-shadow: 0 15px 20px 3px #00968814;
    cursor: pointer;
    transition: transform .5s;
    height: 40%; /*47vh*/   
    background-color: #c3f7ef;   
}
.review-col-2{
    flex-basis: 28.2%; /*23.2%*/
    padding: 15px;
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: 30px;
    box-shadow: 0 15px 20px 3px #00968814;
    cursor: pointer;
    transition: transform .5s;
    height: 100%; /*30vh*/
    background-color: #c3f7ef;
     
}

.review-col p{
    font-size: 20px;
    margin-left: 20px;
    font-family: 'Open Sans', sans-serif;
}
.review-col-2 p{
    font-size: 20px;
    margin-left: 20px;
    font-family: 'Open Sans', sans-serif;

}
.icon{
    display: flex;
    align-items: center;
    margin: 20px 0;
    text-align: center;
    /*justify-content: center;*/ /*centers all title/header content*/
}
.icon img{
    width: 70px;
    margin-right: 20px;
    border-radius: 30px; /* 3px for stadium effect*/
}

.user-info h4{
    /*text-align: center;*/
    font-family: 'Kaushan Script', cursive;
    margin-bottom: 10px;
    font-size: 20px;
}
.user-info small{
    color:#009688;

}
.review-col:hover{
    transform: translateY(-8px);
}

.review-col-2:hover{
    transform: translateY(-8px);
}
.review-row read-more-button{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
@media screen and (max-width: 770px){
    .review-row{
        width: 100%;    
        justify-content: center;

    }
    .review-col{
        flex-basis: 100%;
        height: 100%;
    }
    .review-row-2{
        width: 100%;    
        justify-content: center;

    }
    .review-col-2{
        flex-basis: 100%;
        height: 100%;
    }       
}

标签： htmlcssformatting

解决方案

您可以将行包装在 diveq-height中，并为行定义flex: 1;. 您需要从两个行类中删除高度才能使其生效。

.review-row {
  width: 90%;
  /*changes the width of the box*/
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.eq-height {
  display: flex;
}

.review-col {
  flex: 1;
}

.review-row-2 {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.review-col {
  flex-basis: 33%;
  /*36.3*/
  padding: 20px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 30px;
  box-shadow: 0 15px 20px 3px #00968814;
  cursor: pointer;
  transition: transform .5s;
  background-color: #c3f7ef;
}

.review-col-2 {
  flex-basis: 28.2%;
  /*23.2%*/
  padding: 15px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 30px;
  box-shadow: 0 15px 20px 3px #00968814;
  cursor: pointer;
  transition: transform .5s;
  background-color: #c3f7ef;
}

.review-col p {
  font-size: 20px;
  margin-left: 20px;
  font-family: 'Open Sans', sans-serif;
}

.review-col-2 p {
  font-size: 20px;
  margin-left: 20px;
  font-family: 'Open Sans', sans-serif;
}

.icon {
  display: flex;
  align-items: center;
  margin: 20px 0;
  text-align: center;
  /*justify-content: center;*/
  /*centers all title/header content*/
}

.icon img {
  width: 70px;
  margin-right: 20px;
  border-radius: 30px;
  /* 3px for stadium effect*/
}

.user-info h4 {
  /*text-align: center;*/
  font-family: 'Kaushan Script', cursive;
  margin-bottom: 10px;
  font-size: 20px;
}

.user-info small {
  color: #009688;
}

.review-col:hover {
  transform: translateY(-8px);
}

.review-col-2:hover {
  transform: translateY(-8px);
}

.review-row read-more-button {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

@media screen and (max-width: 770px) {
 .eq-height {
   flex-direction: column;
   flex-basis: 100%;
 }
 .review-row {
    width: 100%;
    justify-content: center;
  }
  .review-col {
    flex-basis: 100%;
  }
  .review-row-2 {
    width: 100%;
    justify-content: center;
  }
  .review-col-2 {
    flex-basis: 100%;
  }
}
<div class="review-row">
  <div class="eq-height">
    <div class="review-col">
      <div class="icon">
        <img src="images/facials.PNG">
        <div class="user-info">
          <h4>Facials</h4>
        </div>
      </div>
      <p>Custom Facials<br> Custom Chemical Peel Facials<br> Image O2 Lift Facial<br> Galvanic Facial<br> Circadia Oxygen RX Facial<br> Dermaplaning Facial<br> Microdermabrasion Facial<br> Microneeding Facial<br> Fox C Peel Facial<br> Plamere Skin Tightening
        Facial
        <br> Plasma Fusion Facial<br> FCR Facial
      </p>
    </div>

    <div class="review-col">
      <div class="icon">
        <img src="images/skin_solutions.PNG">
        <div class="user-info">
          <h4>Skin Care Solutions</h4>
        </div>

      </div>
      <p>Skin Tags<br> Cherry Angiomas<br> Sebacious Hyperplasia<br> Fibromas
        <br> Seborrheic Keratosis<br> Flat Hyperigmentation<br> Acne Lesions<br> Milias
        <br> Closed Comedones<br> Cappillaries
      </p>
    </div>
  </div>
</div>

<div class="review-row-2">
  <div class="eq-height">
    <div class="review-col-2">
      <div class="icon">
        <img src="images/lash.PNG">
        <div class="user-info">
          <h4>Custom Lashes</h4>
        </div>
      </div>
      <p>Full Set of Classic and Volume Lash Extension<br> Lash Extension Fill<br> Lash Extension Removal<br> Lash Lift and Tint<br>
      </p>
    </div>
    <div class="review-col-2">
      <div class="icon">
        <img src="images/microblading.PNG">
        <div class="user-info">
          <h4>Microblading</h4>
        </div>
      </div>
      <p>Permanent Eyebrow Tattoo Techinque
      </p>
    </div>
    <div class="review-col-2">
      <div class="icon">
        <img src="images/eyebrow_treatment.PNG">
        <div class="user-info">
          <h4>Eyebrow Treatment</h4>
        </div>
      </div>
      <p>Eyebrow Waxing<br> Eyebrow Tint
      </p>
    </div>
  </div>
</div>

推荐阅读