Divが正しく浮動していない。私は何が欠けているのか分かりません

私はクラスを取り入れているので、浮動小数点を使って2つのdivを並べるのに問題があります。Divが正しく浮動していない。私は何が欠けているのか分かりません

＃1番目のdivにfloatを使用すると、＃2番目のdivは#firstの右側に移動しません。

私が間違っていることがわかりません。ここで

はHTMLです：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="main.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div id="first">First</div> 
      <div id="second">Second</div> 
     </div> 
    </body> 
</html>

そして、ここでは、CSSです：

html, body, div, p { 
    padding: 0; 
    margin: 0; 
} 
.container { 
    border: 2px solid black; 
    width: 1280px; 
    height: 500px; 
    margin: 10px auto 0; 
} 
.container div { 
    margin: 5px; 
    padding: 10px; 
} 
#first { 
    border: 2px solid red; 
    width: 25%; 
    float: left; 
} 
#second { 
    border: 2px solid green; 
    width: 25%; 
}

出典

2016-06-30 Eric Schumann

divsデフォルトでは、彼らが画面の幅いっぱいを取る意味、ブロック要素です。これを修正するには、ディスプレイスタイルinline-blockを両方のdivに追加するだけです。働い

html, body, div, p { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    border: 2px solid black; 
 
    width: 1280px; 
 
    height: 500px; 
 
    margin: 10px auto 0; 
 
} 
 
.container div { 
 
    margin: 5px; 
 
    padding: 10px; 
 
} 
 
#first { 
 
    border: 2px solid red; 
 
    width: 25%; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
#second { 
 
    border: 2px solid green; 
 
    width: 25%; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div id="first">First</div> 
 
    <div id="second">Second</div> 
 
</div>

出典

2016-06-30 21:21:54

！どうもありがとうございます。 –

Divが正しく浮動していない。私は何が欠けているのか分かりません

答えて

関連する問題