Thema: Fotoslider
Einzelnen Beitrag anzeigen
  #3 (permalink)  
Alt 05.06.2018, 14:56
Soelg Soelg ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard 2 Verschachtelte Flexboxen ausrichten

Hallo cloned,
besten Dank für Deine Antwort!

Hier zeige ich Dir nochmal mein Problem mit dem beigefügtem Code:
Ich würde mich sehr über eine Lösung freuen!

Also, Ich habe 2 Flexboxen verschachtelt. Die eine für die 3 Fotos mit den dazugehörigen Textboxen und die 2. mit dem jeweiligen Foto und der Textbox darunter.

1. Textbox soll mit der zweiten darunter "row" ausgerichtet sein und ab einer bestimmten Breite dann in "column.

Wie kann ich das umsetzen oder ist das so gar nicht machbar?

Grüße Dieter

HTML-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 {
	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>
Mit Zitat antworten