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