調整大小滾動條上的CSS

這又是一個非常小的問題！我製作了兩個div，一個包含另一個，第二個包含左側的文本和右側的圖像。代碼的作品不錯，但當我調整它的大小時，我注意到文字形成了適合圖像的線條。有沒有辦法避免這種情況發生，因爲沒有調整大小，但滾動條出現？我試圖在第二個div resize: both;但它是相同的結果...調整大小滾動條上的CSS

div.div1 { 
 
    background-color: #F1F1F1; 
 
    border: 1px solid #CCCCCC; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: #e2d8ba; 
 
    border: 1px solid #000000; 
 
    padding: 10px; 
 
    text-align: justify; 
 
    overflow: auto; 
 
}

<div class="div1"> 
 
    <div class="div2"> 
 
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;"> 
 
    
 
    Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing 
 
    </div> 
 
</div>

來源

2017-03-09 darkchampionz

代碼的工作很好，但當我調整它的大小時，我注意到文本形成線條以適合圖像..你能解釋一下這句話是什麼意思？ –

運行代碼並調整窗口大小 – darkchampionz

您可以設置一個固定的寬度爲div2並定義overflow: auto兩個DIV，則滾動條將出現：

div.div1 { 
 
    background-color: #F1F1F1; 
 
    border: 1px solid #CCCCCC; 
 
    padding: 10px; 
 
    overflow: auto; 
 
} 
 

 
div.div2 { 
 
    background-color: #e2d8ba; 
 
    border: 1px solid #000000; 
 
    padding: 10px; 
 
    text-align: justify; 
 
    overflow: auto; 
 
    width: 1000px; 
 
}

<div class="div1"> 
 
    <div class="div2"> 
 
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;"> Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div> 
 
</div>

來源

2017-03-09 11:14:51 Johannes

你的意思是這樣嗎？如果你想讓文本成爲切斷並可滾動的元素，你需要給它自己的div，並製作一個overflow: auto。

div.div1 { 
 
    background-color: #F1F1F1; 
 
    border: 1px solid #CCCCCC; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: #e2d8ba; 
 
    border: 1px solid #000000; 
 
    padding: 10px; 
 
    text-align: justify; 
 
    overflow: hidden; 
 
} 
 

 
div.div3 { 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
}

<div class="div1"> 
 
    <div class="div2"> 
 
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;"> 
 
    <div class="div3">Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div> 
 
    </div> 
 
</div>

來源

2017-03-09 10:46:17 Kaivosukeltaja

嗯，不完全是。我的意思是，如果我調整窗口大小，最初的圖像保持完全相同，滾動條出現... – darkchampionz

文本換行文字與div，並給它固定witdth。然後給它的屬性overflow: auto

div.div1 { 
 
    background-color: #F1F1F1; 
 
    border: 1px solid #CCCCCC; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: #e2d8ba; 
 
    border: 1px solid #000000; 
 
    padding: 10px; 
 
    text-align: justify; 
 
    overflow: auto; 
 
} 
 

 
div.div2 .text-wrapper { 
 
    overflow: auto; 
 
    height: 200px; 
 
} 
 

 
div.div2 .text-wrapper .text { 
 
    width: 400px; 
 
}

<div class="div1"> 
 
    <div class="div2"> 
 
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;"> 
 
    
 
    <div class="text-wrapper"> 
 
    <div class="text"> 
 
     Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

，如果你想整個DIV2滾動，然後你給固定成隨div2

來源

2017-03-09 11:00:16

調整大小滾動條上的CSS

回答

相關問題