Hallo,
wie kann ich die 3 Boxen mit den jeweiligen Textboxen darunter mittig ausrichten und ohne den zur Zeit weiten Abstand dazwischen?
Über Eure Hilfe freue ich mich!
Dieter
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style>
body {
max-width: 61.5%;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
.flexbox {
display: flex;
flex-direction: row;
background-color: gray;
}
.foto_text_flex .bild_text{
display: flex;
}
.bild_text {
background-color: #feeded;
margin: 0 0 0 1.5rem;
border-radius: 3px;
text-align: left;
padding: 0 0.5em 0 1em;
margin-bottom: 4em;
max-width: 20%;
}
.foto {
height: 80px;
background: #d5c991;
margin: 0 0 0.5em 1.5em;
}
</style>
</head>
<body>
<!-- Fotorama Slider mit Textboxen -->
<div class="flexbox"> <!-- 1 Flexbox für alle 3 Fotos -->
<div class="foto_text_flex"> <!-- 2 Flexbox für fotorama(Fotoslider) mit Foto 1 und Textbox("bild_text")-->
<div class="fotorama"
data-allowfullscreen="true">
<img class="foto" src="fotorama_slider/images/zimmer/1.jpg" alt="Foto 1">
</div>
<div class="bild_text">
<div id="akkordeon1">
<input type="checkbox" name="accordeon-title1" class="accordeon-checkbox" id="accordeon-title1" />
<div class="accordeon-content1">
<label for="accordeon-title1" class="accordeon-title-label1"></label>
<p>Lorem ipsum dolor sit amet commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="foto_text_flex"> <!-- 2 Flexbox für fotorama(Fotoslider) mit Foto 2 und Textbox("bild_text")-->
<div class="fotorama"
data-allowfullscreen="true">
<img class="foto" src="fotorama_slider/images/zimmer/1.jpg" alt="Foto 2">
</div>
<div class="bild_text">
<div id="akkordeon2">
<input type="checkbox" name="accordeon-title2" class="accordeon-checkbox" id="accordeon-title2" />
<div class="accordeon-content2">
<label for="accordeon-title2" class="accordeon-title-label2"></label>
<p>Lorem ipsum dolor sit amet commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="foto_text_flex"> <!-- 2 Flexbox für fotorama(Fotoslider) mit Foto 3 und Textbox("bild_text")-->
<div class="fotorama"
data-allowfullscreen="true">
<img class="foto" src="fotorama_slider/images/zimmer/1.jpg" alt="Foto 3">
</div>
<div class="bild_text">
<div id="akkordeon3">
<input type="checkbox" name="accordeon-title" class="accordeon-checkbox" id="accordeon-title3" />
<div class="accordeon-content3">
<label for="accordeon-title3" class="accordeon-title-label3"></label>
<p>Lorem ipsum dolor sit amet commodo consequat.</p>
</div>
</div>
</div>
</div>
</div> <!-- 1 Flexbox für alle 3 Fotos Ende -->
<!--Ende div Slider-->
</body>
</html>