Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 22.02.2018, 20:49
SonyEr92 SonyEr92 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2018
Beiträge: 3
SonyEr92 befindet sich auf einem aufstrebenden Ast
Standard Div im Div mittig unten ausrichten

Moin, moin!

Ich habe folgendes Problem und Google scheint auch keine Lösung zu finden:

Ich programmiere derzeit zum Spaß in HTML & CSS und habe eine Klasse angelegt, die .buttons heißt. Diese sind eigentlich inline-block-Divs.

Nun habe ich einen Zweispalten-Layout mit Text und möchte je ein button-div zentral an die untere Kante des übergeordneten Divs "kleben".

Ich habe mal ein Foto angehängt, damit mal das besser nachvollziehen kann.

Der HTML-Code für den Teil:

<div class="main-content-wrapper">
<section class="content-wrapper clearfix">
<div class="content">
<h3>Text</h3>
<p> Text Text Text</p>
<a class="button" href="#"> Berichte lesen </a><br>
</div> <!-- content -->
<div class="content-aside">
<h3>Text ...</h3>
<p> Text Text Text </p>
<a class="button" href="#"> Frage stellen </a> <br>
</div> <!-- content-aside -->
</section> <!--content-wrapper-->
<div class="content-under-wrapper clearfix">
<div class="content-under">
<h3>Mila on Instagram</h3>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr </p>
<a class="button" href="https://www.instagram.com/mila_bernese/" target="_blank"> Mila besuchen </a>
</div> <!-- content-under -->
</div> <!-- content-under-wrapper -->
</div> <!-- main-content-wrapper -->


Der CSS-Code:

/* ----------CONTENT-BEGINN-------------*/


.content,
.content-aside{
background: white;
height: 500px;
float: left;
margin: 20px 0px;
position: relative;
}

.content,
.content-aside {
width: 50%;
text-align: center;
border-left: 1px solid #696969;
}

.content-under {
width: 100%;
text-align: center;
margin: 20px 0;}

.content {
border: none;
}

.content p, h3 {
padding: 20px 40px 10px 40px;
}

.content-aside p, h3 {
padding: 20px 40px 10px 40px;
}

.content-under p, h3 {
padding: 20px 40px 10px 40px;
}


/* ----------CONTENT-ENDE---------------*/

/* ----------BUTTON-BEGINN-------------*/

.button{
display: inline-block;
padding: 10px 20px;
text-transform: uppercase;
border: 1px solid black;
margin: 10px;
font-weight: 700;
background: #696969;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

.button:hover {
background: #F2CA56;
color: #696969;

}

/* ----------BUTTON-ENDE---------------*/


Ich habe erst vor ca. einer Woche angefangen mir das selbst beizubringen, also seid bitte nett zu mir

Kurz und knapp: Ich möchte die "Berichte lesen" und "Frage stellen"-Buttons so zentral wie sie derzeit sind an das untere Ende des weißen Kästchens klatschen.
Den relevanten Bereich habe ich für die Frage mal weiß gefärbt ^^

Vielen Dank schon einmal für Eure Mühen!

LG
Angehängte Grafiken
Dateityp: png Zweispalten-Layout.png (294,0 KB, 8x aufgerufen)
Mit Zitat antworten
Sponsored Links