HTML/CSS的段落和div

-1

我有一個問題，我的div和段落裏面有我想要做的事情是與div有一個動畫的寬度（從2％到80％的動畫）和我唯一遇到的問題是，在div裏面有一段寫有句子的段落，導致div在橫向上太大（它確實有背景色，但我必須用圖像改變它）。HTML/CSS的段落和div

那麼，我該如何解決段落存在的問題，但看起來像看不見，不佔用空間（然後它必須在某個時間出現）？

編輯：

div.pick 
{ 
height:30%; 
overflow:hidden; 
animation: example 2s; 
} 
@keyframes example 
{ 
0% 
{ 
width:0%; 
} 
100% 
{ 
width:80%; 
}

所以基本上這是對DIV的代碼，裏面有一個形象（這不是問題）問題是，寫的一段horizzontally擴張，我不想那。我希望段落總是在圖像的右側，而不是水平擴展，有沒有辦法？

我想到了什麼樣使文字走出去的div不透明度爲0，另外在div擴展到最大使其出現，我想知道是否有另一種方式

來源

2017-03-16 Neyco

歡迎來到StackOverflow。如果您之前沒有使用過該網站，請閱讀常見問題解答，但我們需要查看代碼或您首先嚐試的內容。 – zik

請提供代碼或截圖類似的東西 –

你試過了嗎？你失敗了嗎？分享一些代碼，如果是這樣，否則，截圖/圖像解釋你想要實現什麼 –

我相信我有一個回答你的問題，下面應該爲你想達到的目的而工作。

您可以爲容器元素設置固定寬度，以便文本不超過此值。如果將文本的不透明度設置爲0，並在動畫完成時將其更改爲1，這將逐漸向您輸入的動畫時間顯示文本。

  <style> 

      .box { width:200px; height:100%; border:1px solid red; } 
      .box p { opacity:0; } 
      .box:hover { animation:expandDiv 2s linear forwards; -webkit-animation:expandDiv 2s linear forwards; } 
      .box:hover p { animation:revealText 2s linear forwards; -webkit-animation:revealText 2s linear forwards; } 

      @keyframes expandDiv { 
       100% { width:300px; } 
      } 

      @-webkit-keyframes expandDiv { 
       100% { width:300px; } 
      } 

      @keyframes revealText { 
       100% { opacity:1; }  
      } 

      @-webkit-keyframes revealText { 
       100% { opacity:1; } 
      } 

      </style>  


      <div class="box"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      </div>

希望這有助於！

來源

2017-03-16 11:52:43

你怎麼能猜到這是沒有任何代碼的寫回答？ –

我想我理解這個問題，但我可能錯了@SaugatBhattarai –

HTML/CSS的段落和div

回答

相關問題