2017-08-01 10 views
2

私の目標は、いくつかの画像(これまでのところ働いていました)のdivと、右側のテキストのdivと、下のテキストのdiv同じように。 missedletters divにテキストを追加すると、何らかの理由でその理由がわかりません。私はdisplay:inline-block と混乱の原因になるかもしれないと思うが、私はそれが何であるか把握できない。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>

+0

こんにちは。正確に問題がどこにあるのか詳しく教えていただけますか? 'missedletters'にテキストを追加すると、それはコンテナの途中から始まります。入力したテキストに対応するために、コンテナを**サイズが拡大するようにしますか? 'poorguy'は単にコンテナの上部にテキストを挿入します。これは意図したものですか?あなたは '右'にdivを言及しますが、これはどちらですか? –

+0

'missedletters'は、入力されたテキストに対応するためにサイズが大きくなるのを奨励され、poorguyの目的は写真を保持することです(私が書いたように)。訂正された文字もテキストを保持するはずですが、うまく動作しています。 –

答えて

0

をあなたはちょうどあなたのmissedlettersのdivに最大幅/幅を追加する必要があります。 display: inline-blockの代わりにfloat: left;を使用できます。

+0

私は 'float:left;'を使ってみましたが、 'badguy' divの配置を乱しましたが、max-widthとmin-widthを使うと助けになりました。 –

関連する問題