Frage Richten Sie den Button am unteren Rand von div mit CSS aus


Ich möchte meinen Knopf in der unteren rechten Ecke meines div ausrichten. Wie kann ich das machen?

enter image description here

Aktuelle CSS von div:

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

75
2018-04-28 10:33


Ursprung


Antworten:


Sie können verwenden position:absolute; absolutes Positionieren eines Elements in einem übergeordneten div. Beim Benutzen position:absolute; Das Element wird absolut aus dem ersten positionierten Elternteil positioniert. Wenn es nicht gefunden wird, wird es absolut aus dem Fenster positioniert, so dass Sie sicherstellen müssen, dass das Inhaltselement positioniert ist.

Um den Inhalt div zu positionieren, alle position Werte, die nicht statisch sind, funktionieren, aber relative ist am einfachsten, da es die divs-Positionierung nicht selbst ändert.

Also füge hinzu position:relative; Zum Inhalt div, entferne den Float von der Schaltfläche und füge folgende css zur Schaltfläche hinzu:

position: absolute;
right:    0;
bottom:   0;

147
2018-04-28 10:36



CSS3 flexbox kann auch zum Ausrichten der Schaltfläche am unteren Rand des Elternelements verwendet werden.

Erforderliches HTML:

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

Notwendiges CSS:

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

Bildschirmfoto:

Output Image

Nützliche Ressourcen:

* {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>


14
2018-03-31 16:04



Eltern-Container muss folgendes haben:

position: relative;

Button selbst muss das haben:

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

oder was auch immer du magst


6
2018-01-04 20:10



Geht nach rechts und kann auf die gleiche Weise für die linke Seite verwendet werden

.yourComponent
{
   float: right;
   bottom: 0;
}

-25
2017-11-29 02:11