2つの要素を下に並べて配置しますか？

Question

私は側で下側に2つのボタンを配置しようとしている、彼らの両方が画面の幅を埋める必要がありますが、私はそれらの幅の50％ を作り、これが私のHTMLです：

#norm, #eco { 
 
\t background-color: #210511; 
 
\t color: white; 
 
\t width: 50%; 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t z-index: 999; 
 
} 
 
#norm { 
 
\t float: left; 
 
} 
 
#eco { 
 
\t float: right; 
 
}

<div id="btmBtnsContainers"> 
 
    <input type="button" name="normal" value="Normal" id="norm" /> 
 
    <input type="button" name="economy" value="Economy" id="eco" /> 
 
</div>

1つのボタンで終了し、もう1つは非表示になります。

Answer 1

ボタンの代わりにコンテナabsoluteを作成してください。このように：

#btmBtnsContainers { 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left:0; 
 
    z-index: 999; 
 
} 
 

 
#norm, 
 
#eco { 
 
    background-color: #210511; 
 
    color: white; 
 
    width: 50%; 
 
    float:left; 
 
}

<div id="btmBtnsContainers"> 
 
    <input type="button" name="normal" value="Normal" id="norm" /> 
 
    <input type="button" name="economy" value="Economy" id="eco" /> 
 
</div>

Answer 2

あなたがそれらを配置する絶対あるとき、あなたのボタンを浮動のも意味がありません。代わりに、このようにそれらの左右の位置を割り当てます。

#norm,#eco { 
 
    background-color:#210511; 
 
    color:white; 
 
    width: 50%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    z-index: 999; 
 
} 
 

 
#norm { 
 
    left:0; 
 
} 
 

 
#eco { 
 
    right:0; 
 
}

<div id="btmBtnsContainers"> 
 
     <input type="button" name="normal" value="Normal" id="norm" /> 
 
     <input type="button" name="economy" value="Economy" id="eco" /> 
 
    </div>

Answer 3

ここでそれを行う、との一つの方法でニサの答えは別です：あなたが入力のためにposition:absolute設定したので

それらは同じ位置に置かれます。右側に配置するには、right:0を1つ追加してください。

また、positionをabsoluteに変更すると、floatプロパティはもはや機能しなくなり、削除することができます。

#norm,#eco { 
 
      background-color:#210511; 
 
      color:white; 
 
      width: 50%; 
 
      position: absolute; 
 
      bottom: 0; 
 
      z-index: 999; 
 
     } 
 
     #eco 
 
     { 
 
      right:0; 
 
     }

<div id="btmBtnsContainers"> 
 
     <input type="button" name="normal" value="Normal" id="norm" /> 
 
     <input type="button" name="economy" value="Economy" id="eco" /> 
 
    </div>

Answer 4

使用leftとrightの代わりfloat。

#norm,#eco { 
 
      background-color:#210511; 
 
      color:white; 
 
      width: 50%; 
 
      position: absolute; 
 
      bottom: 0; 
 
      z-index: 999; 
 
     } 
 
     #norm 
 
     { 
 
      left:0; 
 
     } 
 
     #eco 
 
     { 
 
      right:0; 
 
     }

<div id="btmBtnsContainers"> 
 
     <input type="button" name="normal" value="Normal" id="norm" /> 
 
     <input type="button" name="economy" value="Economy" id="eco" /> 
 
    </div>