堆栈内存溢出
  繁体   English   中英

如何让体育场盒子按高度相互成比例？ （HTML 和 CSS）

[英]How to make stadium boxes proportional to each other by height? (HTML and CSS)

 原文  2020-11-15 03:46:38  8   1    html/ css/ formatting

问题描述

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

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

根据它所在的行使盒子的高度彼此相等的最佳方法是什么？

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

我还尝试在 .review-col 和 .review-col-2 类中的高度属性中使用 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%;
    }       
}

1 个解决方案

解决方案1
 1 已采纳  2020-11-15 05:46:49

您可以将行包裹在 div 中，例如eq-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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 html 和 css 制作成比例的 4 列布局 使宽度与CSS中的高度成比例 如何使HTML表格的高度与其宽度成比例？ CSS：使div宽度与高度成比例 如何在 CSS 中使 2 个单元格在高度上相互独立？ html 制作<td>高度与宽度成正比 在对齐列表项时如何使div框彼此相同的高度 如何在纯 html 和 css 中制作这些盒子？ 如何使内容div的高度成比例？ 如何在CSS / HTML中将文本框彼此对齐
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM