web-dev-qa-db-ja.com

CSSを使用してdivの下部にボタンを配置

Divの右下隅にボタンを配置します。どうやってやるの？

enter image description here

Divの現在のCSS：

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;
cssbuttonalignment
88
Harry Joy

position:absolute;を使用して、要素を親div内に絶対に配置できます。 position:absolute;を使用する場合、要素は最初に配置された親divから絶対に配置されます。見つからない場合はウィンドウから絶対に配置されるため、コンテンツdivを配置する必要があります。

コンテンツdivを配置するには、静的ではないすべてのposition値が機能しますが、relative自体はdivの配置を変更しないため、最も簡単です。

したがって、position:relative;をコンテンツdivに追加し、ボタンからフロートを削除して、ボタンに次のCSSを追加します。

position: absolute;
right:    0;
bottom:   0;
186
Kokos

CSS3 flexboxは、親要素の下部にボタンを配置するためにも使用できます。

必要なHTML：

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

必要なCSS：

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

スクリーンショット：

Output Image

有用なリソース：

* {box-sizing: border-box;}
body {
  background: linear-gradient(orange, yellow);
  font: 14px/18px Arial, sans-serif;
  margin: 0;
}
.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
}
<div class="container">
  <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>
23
Mohammad Usman

親コンテナにはこれが必要です：

position: relative;

ボタン自体には次のものが必要です。

position: relative;
bottom: 20px;
right: 20px;

またはあなたが好きなもの

9
Aron