在垂直移動視圖中將文本重疊到第二頁上

因此，在「關於」頁面上，我將所有內容放在容器中。現在在一個大屏幕上，當我點擊「單擊滑動面板右側」區域時，一個文本塊向右滑動。當我調整到小於720px的面板時，面板消失，文本塊也會消失，但它顯示在右側的較小屏幕上並與其他頁面重疊。在垂直移動視圖中將文本重疊到第二頁上

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*/

來源

2016-02-27 user2763557

您好，很難理解您希望我們提供什麼幫助。請澄清。你想對文本做什麼？隱藏它*或*將它推到下面？ – AVAVT

我想將它推到圖片的下方，但是現在當我嘗試將文本移出容器並重疊到「投資組合」頁面上時。無法解決這個問題。 @Av Avt – user2763557

http://codepen.io/anon/pen/VawmZr這是你想要的嗎？ – AVAVT

的修補程序簡單地添加

@media screen and (max-width: 720px) { 
    .title { 
    margin: 0; 
    } 
}

http://codepen.io/anon/pen/VawmZr

這是因爲在寬版，標題對齊Ť運右側不浮動，但陰性切緣：

.title{ 
    margin-left:22em; 
    margin-top:-24em; 

}

當該負緣走了，它會回去的地方，它應該是一個塊元素。

來源

2016-02-27 04:36:44 AVAVT

在垂直移動視圖中將文本重疊到第二頁上

回答

相關問題