Div在添加文本時移動，單詞換行不起作用

我的目標是爲少數圖像創建一個div（它迄今爲止已工作），一些文本的div位於右側，另一個div位於底部的文本以及。當我將文本添加到missedletters div時，它以某種方式下降不知爲什麼。我認爲這可能會導致混亂，但我不知道它是什麼。Div在添加文本時移動，單詞換行不起作用

的事項的CSS：

body { 
 
    background-color: #303030; 
 
    font-family: 'Source Code Pro', monospace; 
 
    font-size: 28px; 
 
} 
 

 
body .arena { 
 
    min-height: 400px; 
 
    height: 50%; 
 
    width: 50%; 
 
    margin: auto; 
 
    margin-top: 11.5%; 
 
    background-color: darkseagreen; 
 
    border-radius: 15px; 
 
} 
 

 
.poorguy { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-top: 12px; 
 
    min-width: 360px; 
 
    /* not sure if shouldn't be longer, but fits into it*/ 
 
    min-height: 300px; 
 
    /* so i'll check it out in the process*/ 
 
    bottom: 0px; 
 
} 
 

 
.missedletters { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    margin-top: 12px; 
 
    min-height: 320px; 
 
    min-width: 190px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    word-wrap: break-word; 
 
} 
 

 
.correctletters { 
 
    min-height: 80px; 
 
    vertical-align: top; 
 
    word-wrap: nowrap; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div class="background"> 
 
    <div class="arena"> 
 
     <div class="poorguy"> 
 
     </div> 
 
     <div class="missedletters"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-08-01 Piotr Żaczek

你好。你能否詳細說明問題出在哪裏？當您將文本添加到「missedletters」時，它會從容器的中途開始。您是否希望容器的**尺寸增大以適應輸入的任何文本？ 'poorguy'只需在容器頂部插入文本;這是打算嗎？你提到了'正確'的div，但我不確定這是什麼？ –

'missedletters'支持增長以容納任何輸入的文本，而窮人的目的是保存圖片（就像我寫的那樣）。更正後的字母應該保留文本，但它也工作得很好。 –

你只需要一個最大寬度/寬度添加到您的missedletters股利。您可以使用float: left;而不是display: inline-block;

來源

2017-08-02 00:10:49 Pratikshya

我試過使用'float：left;'，但它搞糟了''poorguy' div的放置，但是使用最大寬度和改變最小寬度確實有幫助。 –

Div在添加文本時移動，單詞換行不起作用

回答

相關問題