因此,在“关于”页面上,我将所有内容都放在了一个容器中。现在在大屏幕上,当我单击“单击以向右滑动面板”区域时,一块文本将向右滑动。当我将尺寸调整为小于720像素时,面板消失,文本块也应该消失,但是它显示在右侧的小屏幕中,并且与其他页面重叠。
a)我如何包含此文本块
b)我想我知道如何在那之后找出如何在图像下方移动文本,因此在移动设备中查看时,图片是屏幕的中心(我已经实现了)。然后在容器区域中图像下方未添加任何动画的情况下出现文本块(只是看起来是静态的)。
试图解决这个问题已经有几个小时了,但是我对它的定位有感觉吗?我的代码在做什么错?谢谢!
freecodecamp personal portfolio project
.secondpage{
background-color:pink;
height:57em;
}
/*.title{
padding-top:.5em;
}*/
.picture{
padding-top:10em;
padding-bottom:0em;
}
.img-circle{
width:20em;
height:20em;
border:.2em solid;
border-radius:50%;
}
/*start of toggle panel design*/
/***********************************************************************************************************************/
@media screen and (max-width: 720px) {
.img-circle{
margin-left:auto;
margin-right:auto;
margin-top:-8em;
}
}
#flip{
position:absolute;
transform:rotate(-90deg);
margin-left:6em;
margin-top:-6.1em;
border:.1em solid;
}
.title{
margin-left:22em;
margin-top:-24em;
}
.contthird1{
background-color:red;
height:100%;
}
.title p{
border:.1em solid;
color: rgba(0,0,0,0.9);
width:100%;
}
@media screen and (max-width: 720px){
.title>p{
border-style:none;
}
}
.title a:hover{
text-decoration:none;
color:blue;
font-weight:bold;
}/*for self taught link*/
最佳答案
解决方法只是添加
@media screen and (max-width: 720px) {
.title {
margin: 0;
}
}
http://codepen.io/anon/pen/VawmZr
这是因为在宽版中,标题不是通过浮动对齐到右上角,而是以负边距对齐:
.title{
margin-left:22em;
margin-top:-24em;
}
当负边距消失时,它将作为块元素返回到应有的位置。
关于css - 文字重叠的容器并进入垂直移动 View 中的第二页,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35665447/