horizontal ausgerichtete Buttons Eine feste Position innerhalb eines Div Geben

Question

Ich habe ein div mit zwei Tasten horizontal in ihr wie folgt ausgerichtet:

Ich mag die gleiche Breite von der Unterseite der haben, die Tasten div unabhängig von der Anzahl der Zeilen über ihnen.

Normalerweise würde ich das übergeordnete div position: relative; und die Tasten geben position: absolute;, aber die absolute Positionierung in diesem Fall zerstört ihre ursprüngliche Ausrichtung, die linke wodurch die Seite vollständig fallen:

I Ich weiß nicht genug über CSS-Positionierung, um zu wissen, warum dies der Fall ist.

Dies ist meine bestehende HTML und CSS.

HTML:

<div class="formula-block centered" id="587d6b07c89e7613846a3cf3"> 
     <h4 class="padded-top"> Vegan Vit. D</h4> 
     <p> fat soluble vitamin mix</p> 
      <button class="button-success pure-button"><a href="/formula/587d6b07c89e7613846a3cf3">Show</a></button> 
      <button class="button-warning pure-button">Delete</button> 
    </div> 

CSS/LESS:

.formula-block { 
    height: 225px; 
    width: 200px; 
    border: 3px solid lighten(@dark-grey, 15%); 
    box-shadow: 1px 1px @grey; 
    margin-bottom: 1.5em; 
    margin-right: 1.5em; 
    position: relative; 
a { 
    color: @off-white; 
    text-decoration: none; 
} 
p { 
    padding: 0px 5px 0px 5px; 
    } 
button { 
    position: absolute; 
    bottom: 0.5em; 
    } 
} 

Wie kann ich die Tasten, um einen festen Abstand vom Boden geben? Jede Hilfe wäre dankbar, danke.

Answer 1

Sie müssen nur die linke Taste left: 0 und rechte Taste right: 0 geben, wo 0 ist die Position von links oder rechts Sie sie positioniert werden soll. 0 kann ein px-Wert sein, em,% usw., abhängig von Ihrer UI und wie sie aussehen soll.

.formula-block { 
 
    height: 225px; 
 
    width: 200px; 
 
    border: 3px solid lighten(@dark-grey, 15%); 
 
    box-shadow: 1px 1px @grey; 
 
    margin-bottom: 1.5em; 
 
    margin-right: 1.5em; 
 
    position: relative; 
 
} 
 

 
a { 
 
    color: @off-white; 
 
    text-decoration: none; 
 
} 
 

 
p { 
 
    padding: 0px 5px 0px 5px; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    bottom: 0.5em; 
 
} 
 

 
.button-success { 
 
    left: 0; 
 
} 
 

 
.button-warning { 
 
    right: 0; 
 
}

<div class="formula-block centered" id="587d6b07c89e7613846a3cf3"> 
 
    <h4 class="padded-top"> Vegan Vit. D</h4> 
 
    <p> fat soluble vitamin mix</p> 
 
    <button class="button-success pure-button"><a href="/formula/587d6b07c89e7613846a3cf3">Show</a></button> 
 
    <button class="button-warning pure-button">Delete</button> 
 
</div>

Alternativ können Sie absolut ein neues Element positionieren, dass die Tasten Wraps

.formula-block { 
 
    height: 225px; 
 
    width: 200px; 
 
    border: 3px solid lighten(@dark-grey, 15%); 
 
    box-shadow: 1px 1px @grey; 
 
    margin-bottom: 1.5em; 
 
    margin-right: 1.5em; 
 
    position: relative; 
 
} 
 

 
a { 
 
    color: @off-white; 
 
    text-decoration: none; 
 
} 
 

 
p { 
 
    padding: 0px 5px 0px 5px; 
 
} 
 

 
.buttons { 
 
    position: absolute; 
 
    bottom: 0.5em; 
 
    left: 0; right: 0; 
 
    text-align: center; 
 
}

<div class="formula-block centered" id="587d6b07c89e7613846a3cf3"> 
 
    <h4 class="padded-top"> Vegan Vit. D</h4> 
 
    <p> fat soluble vitamin mix</p> 
 
    <div class="buttons"> 
 
    <button class="button-success pure-button"><a href="/formula/587d6b07c89e7613846a3cf3">Show</a></button> 
 
    <button class="button-warning pure-button">Delete</button> 
 
    </div> 
 
</div>