同じ行に2つのdivが表示されない場合は、

Question

私はいくつかのhtml/css/javascriptを楽しく学び始めており、問題が残っています。 htmlでは、同じ行にdivのペアを表示したいのですが、どうして私がそれをできないのかわかりません。

私は同じライン上と同じ高さで表示したいdivが

はここに私のコードである「ボタン」と「テキスト」のカップルです！コメントで示唆Leo the lionとして

html { 
 
    background-color: #e6eeff; 
 
    font-family: Verdana; 
 
} 
 
* { 
 
    border: 1px solid black; 
 
} 
 
#bgCal { 
 
    background-color: #004466; 
 
    color: white; 
 
    width: 500px; 
 
    margin: 0px auto; 
 
    border-radius: 10px; 
 
    padding: 10px 10px 10px 10px; 
 
} 
 
#display { 
 
    background-color: #d7d7c1; 
 
    color: black; 
 
    text-align: right; 
 
    width: 400px; 
 
    height: 100px; 
 
    font-size: 30px; 
 
    margin: 10px auto; 
 
    line-height: 100px; 
 
    border-radius: 5px; 
 
} 
 
#numberTot { 
 
    background-color: #d7d7c1; 
 
    vertical-align: middle; 
 
    line-height: normal; 
 
    margin-right: 5px; 
 
} 
 
.button { 
 
    background-color: #0099e6; 
 
    width: 150px; 
 
    height: 60px; 
 
    border-radius: 5px; 
 
    margin: 10px 50px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 
.text { 
 
    background-color: #004466; 
 
    color: white; 
 
    height: 60px; 
 
    width: 180px; 
 
    margin: 10px 50px 10px 0px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    overflow: hidden; 
 
}

<div id="bgCal"> 
 
    <div id="display"> 
 
    <span id="numberTot"> 0 </span> 
 
    </div> 
 
    <button class="button" onclick="numberClick(1)">+</button> 
 
    <div class="text"> 
 
    Every click increase of 1 the total number. 
 
    </div> 
 
    <br> 
 
    <button class="button" onclick="buyStudent()"> 
 
    Buy Student 
 
    <br>Cost: <span id="studentLUCost">10</span> 
 
    <br>Students owned: <span id="studentLevel">0</span> 
 
    </button> 
 
    <div class="text"> 
 
    A student can click instead of yourself, but they are slower. 
 
    <br> 
 
    <span id="studentProd">0</span> num/sec 
 
    </div> 
 
</div>

Answer 1

、あなたは単に望ましい効果を得るためにあなたの.buttonクラスにfloat:leftとclear:bothを置くことができます。

Clearは、浮動要素が指定された要素（この場合はboth左右）の横に存在しないようにするために使用され、下にプッシュします。詳細については、hereに関する優れたQAがあります。

html { 
 
    background-color: #e6eeff; 
 
    font-family: Verdana; 
 
} 
 

 
* { 
 
    border: 1px solid black; 
 
} 
 

 
#bgCal { 
 
    background-color: #004466; 
 
    color: white; 
 
    width: 500px; 
 
    margin: 0px auto; 
 
    border-radius: 10px; 
 
    padding: 10px 10px 10px 10px; 
 
} 
 

 
#display { 
 
    background-color: #d7d7c1; 
 
    color: black; 
 
    text-align: right; 
 
    width: 400px; 
 
    height: 100px; 
 
    font-size: 30px; 
 
    margin: 10px auto; 
 
    line-height: 100px; 
 
    border-radius: 5px; 
 
} 
 

 
#numberTot { 
 
    background-color: #d7d7c1; 
 
    vertical-align: middle; 
 
    line-height: normal; 
 
    margin-right: 5px; 
 
} 
 

 
.button { 
 
    background-color: #0099e6; 
 
    width: 150px; 
 
    height: 60px; 
 
    border-radius: 5px; 
 
    margin: 10px 50px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    float:left; 
 
    clear:both; 
 
} 
 

 
.text { 
 
    background-color: #004466; 
 
    color: white; 
 
    height: 60px; 
 
    width: 180px; 
 
    margin: 10px 50px 10px 0px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    overflow: hidden; 
 
}

<div id="bgCal"> 
 
      <div id="display"> 
 
       <span id="numberTot"> 0 </span> 
 
      </div> 
 
      <button class="button" onclick="numberClick(1)">+</button> 
 
      <div class="text"> 
 
       Every click increase of 1 the total number. 
 
      </div> 
 
      <br> 
 
      <button class="button" onclick="buyStudent()"> 
 
       Buy Student 
 
       <br> 
 
       Cost: <span id="studentLUCost">10</span> 
 
       <br> 
 
       Students owned: <span id="studentLevel">0</span> 
 
      </button> 
 
      <div class="text"> 
 
       A student can click instead of yourself, but they are slower. 
 
       <br> 
 
       <span id="studentProd">0</span> num/sec 
 
      </div> 
 
     </div>

Answer 2

あなたがinline-blockを使用する場合は、あなただけ追加することができますvertical-align

html { 
 
    background-color: #e6eeff; 
 
    font-family: Verdana; 
 
} 
 
* { 
 
    border: 1px solid black; 
 
} 
 
#bgCal { 
 
    background-color: #004466; 
 
    color: white; 
 
    width: 500px; 
 
    margin: 0px auto; 
 
    border-radius: 10px; 
 
    padding: 10px 10px 10px 10px; 
 
} 
 
#display { 
 
    background-color: #d7d7c1; 
 
    color: black; 
 
    text-align: right; 
 
    width: 400px; 
 
    height: 100px; 
 
    font-size: 30px; 
 
    margin: 10px auto; 
 
    line-height: 100px; 
 
    border-radius: 5px; 
 
} 
 
#numberTot { 
 
    background-color: #d7d7c1; 
 
    vertical-align: middle; 
 
    line-height: normal; 
 
    margin-right: 5px; 
 
} 
 
.button { 
 
    background-color: #0099e6; 
 
    width: 150px; 
 
    height: 60px; 
 
    border-radius: 5px; 
 
    margin: 10px 50px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    vertical-align:top;/* reset here vertical-align to next inline content: top, bottom, middle, 1em, etc ... */ 
 
} 
 
.text { 
 
    background-color: #004466; 
 
    color: white; 
 
    height: 60px; 
 
    width: 180px; 
 
    margin: 10px 50px 10px 0px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    overflow: hidden; 
 
}

<div id="bgCal"> 
 
    <div id="display"> 
 
    <span id="numberTot"> 0 </span> 
 
    </div> 
 
    <button class="button" onclick="numberClick(1)">+</button> 
 
    <div class="text"> 
 
    Every click increase of 1 the total number. 
 
    </div> 
 
    <br> 
 
    <button class="button" onclick="buyStudent()"> 
 
    Buy Student 
 
    <br>Cost: <span id="studentLUCost">10</span> 
 
    <br>Students owned: <span id="studentLevel">0</span> 
 
    </button> 
 
    <div class="text"> 
 
    A student can click instead of yourself, but they are slower. 
 
    <br> 
 
    <span id="studentProd">0</span> num/sec 
 
    </div> 
 
</div>

Answer 3

を見てみましょう

vertical-align: middle; 

（両方とも.buttonおよび.textクラスの場合）

私はフィドルリンクを作成しました。あなたはそれを確認することができます - https://jsfiddle.net/1fm1cpqh/

Answer 4

ちょうどフロートを追加：あなたの.buttonクラスに .button { フロート：左;}左