自动高度不适用于 HTML 中基于 div 的文本
Auto height not working on text based div in HTML
我知道这一定是一个非常简单的问题,但我在自动调整基于文本的高度时遇到了问题 div。基本上我连续显示两个水平 divs。一种是基于文本的,另一种是基于图像的。基于图像的 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>
请提出可能的解决方案。我将不胜感激。
谢谢
与其使用 float
来水平对齐您的元素,使用 display: flex;
会容易得多
使用flex
将使左右元素保持相同的高度。
另请注意:您需要删除 #custom-section2 .left
中的 height: 464.67px;
声明并从 #custom-section2 .left, #custom-section2 .right
中删除 float: left;
。
(查看我在 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>
我知道这一定是一个非常简单的问题,但我在自动调整基于文本的高度时遇到了问题 div。基本上我连续显示两个水平 divs。一种是基于文本的,另一种是基于图像的。基于图像的 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>
请提出可能的解决方案。我将不胜感激。
谢谢
与其使用 float
来水平对齐您的元素,使用 display: flex;
使用flex
将使左右元素保持相同的高度。
另请注意:您需要删除 #custom-section2 .left
中的 height: 464.67px;
声明并从 #custom-section2 .left, #custom-section2 .right
中删除 float: left;
。
(查看我在 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>