XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Verschachtelte Flexboxen ausrichten (http://xhtmlforum.de/showthread.php?t=73513)

Soelg 05.06.2018 19:26

Verschachtelte Flexboxen ausrichten
 
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>



Alle Zeitangaben in WEZ +2. Es ist jetzt 12:54 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023