我把高度设置为520px,但是我希望网站能够快速响应,并且高度是动态的。问题是每当我尝试添加min-height:100px; overflow:auto;
时,内容开始显示在页面中间,隐藏在上面的一个div后面。我也尝试了height:fit-content
,但它也不起作用。有什么想法吗?
下面是代码:
<div class="content">
<div class="leftimg">
<img src="../img/img.png">
</div>
<div class="righttext">
<div>
<span class="topic">text</span>
</div><br>
<span class="desc">
text
</span>
</div>
</div>
</div>
.righttext{
display:block;
width: 50%;
padding: 1em;
float: right;
font-family: teko;
text-align: center;
border-left:2px dashed #ffffff;
height: 90%;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.leftimg{
display:block;
width: 43%;
padding: 1em;
border: 1px solid red;
float:left;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
align-items: center;
}
.desc{
font-size: 1.5em;
}
.topic{
font-size: 3em;
}
.content{
position: relative;
display: block;
background-color: #76C9F0;
height:520px;
border-radius: 0px 0px 20px 20px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 480px) {
.content{
width: 100%;
border-radius: 0px 0px 0px 0px;
overflow: auto;
}
.leftimg{
display:none !important;
}
.righttext{
width: 90% !important;
margin-left: auto;
margin-right: auto;
border-bottom: 2px dashed white;
border-left: none !important;
}
}
对于当前的问题,最简单的解决方案是什么?enter image description here
1条答案
按热度按时间mefy6pfw1#
因此,您可以尝试一下,看看这是否解决了问题。因此,我注解掉了transform属性,并在. content文件中添加了
overflow: auto
。