时间戳

首页 > 解决方案 > 自动高度不适用于 HTML 中基于文本的 div

html - 自动高度不适用于 HTML 中基于文本的 div

问题描述

我知道这一定是一个非常简单的问题，但我在自动调整基于文本的 div 的高度时遇到了麻烦。基本上我连续显示两个水平 div。一种是基于文本的，另一种是基于图像的。基于图像的 div 始终自动调整其高度，但基于文本的 div 不会相应地自动调整其高度。可能是因为我添加了填充但不知道如何根据不同的屏幕分辨率进行调整。请找到以下两个屏幕截图以便更好地理解。

桌面视图： 在此处输入图像描述

手机或平板电脑视图： 在此处输入图像描述

以下是供参考的代码：

<style>
.container {
    display:block;  
    width:100%;
}

#custom-section2 .left, #custom-section2 .right {
    float: left;
    width: 50%;
}

#custom-section2 .left {    
    background-color: #F7E3EC; 
    height: 464.67px;   
}
#custom-section2 .right {
    background-color: #FFF;     
}
.section2-with-text1{
    padding-top: 15%;
    font-size: 2vw;
    font-family: 'Arial';
    letter-spacing: 0.1em;
}
.section2-with-text2{
    padding-top: 5%;
    font-size: 1.4vw;
    font-family: 'Arial';
}
.section2-with-text3{
    padding-top: 15%;
}
.section2-with-text3 .button {
    background-color: #000;
    border: none;
    color: white;
    padding: 8px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    display:inline-block;
}
.img-style{
    height: auto;
}
@media only screen and (min-width:1901px) {
    #custom-section2 .right img{
        height: 660px;
    }
    #custom-section2 .left{
        height: 660px;
    }
}
@media only screen and (max-width:1900) {
    #custom-section2 .right img{
        height: auto;
    }
    #custom-section2 .left{
        height: auto;
    }
}
#custom-section2 .right img{
    width: 100%;
}

</style>
<div class="container" id="custom-section2">
    <div class="right">
        <img src="https://cdn.shopify.com/s/files/1/2200/5487/files/Rectangle_8.jpg?v=1582366707" class="img-style" alt="">
    </div>
    <div class="left">
        <div class="section2-with-text1"><center>TEETH WHITENING KITS</center></div>
        <div class="section2-with-text2"><center>Get that insta-famous smile, from the convenience <br> from your home. Formulated with whitening <br> ingredients previously only available at your dentist.</center></div>
        <div class="section2-with-text3"><center><button class="button">SHOP NOW</button></center></div>
    </div>
</div>

请提出一个可能的解决方案。我将感激不尽。

谢谢

标签： htmlcssheightauto

解决方案

而不是使用float水平对齐你的元素，它会更容易使用display: flex;

使用flex将保持左右元素的高度相同。

另请注意：您需要删除in和 remove from中的height: 464.67px;声明。#custom-section2 .leftfloat: left;#custom-section2 .left, #custom-section2 .right

（请参阅我在 CSS 代码中的所有评论）

像这样：（运行代码片段）

.container {
    display:block;  
    width:100%;
}

#custom-section2 {
    display: flex; /*Add this!*/
}

#custom-section2 .left, #custom-section2 .right {
    width: 50%;
    /*float: left;*/ /*remove this!*/
}

#custom-section2 .left {    
    background-color: #F7E3EC;
    /*height: 464.67px;*/ /*Remove this!*/
}
#custom-section2 .right {
    background-color: #FFF;     
}

.section2-with-text1{
    padding-top: 15%;
    font-size: 2vw;
    font-family: 'Arial';
    letter-spacing: 0.1em;
}
.section2-with-text2{
    padding-top: 5%;
    font-size: 1.4vw;
    font-family: 'Arial';
}
.section2-with-text3{
    padding-top: 15%;
}
.section2-with-text3 .button {
    background-color: #000;
    border: none;
    color: white;
    padding: 8px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    display:block;
}

/*.img-style{
    height: auto;
}/*

/* You can remove all this: */
/*@media only screen and (min-width:1901px) {
    #custom-section2 .right img{
        height: 660px;
    }
    #custom-section2 .left{
        height: 660px;
    }
}
@media only screen and (max-width:1900) {
    #custom-section2 .right img{
        height: auto;
    }
    #custom-section2 .left{
        height: auto;
    }
}*/
#custom-section2 .right img{
    width: 100%;
    height: auto; /*Add this!*/
    display: block; /*Add this!*/
}
<div class="container" id="custom-section2">
    <div class="right">
        <img src="https://cdn.shopify.com/s/files/1/2200/5487/files/Rectangle_8.jpg?v=1582366707" class="img-style" alt="">
    </div>
    <div class="left">
        <div class="section2-with-text1"><center>TEETH WHITENING KITS</center></div>
        <div class="section2-with-text2"><center>Get that insta-famous smile, from the convenience <br> from your home. Formulated with whitening <br> ingredients previously only available at your dentist.</center></div>
        <div class="section2-with-text3"><center><button class="button">SHOP NOW</button></center></div>
    </div>
</div>

推荐阅读