zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Verschachtelte Flexboxen ausrichten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.06.2018, 18:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fotoslider Soelg CSS 2 05.06.2018 13:56
Verschachtelte Listen ausrichten nani CSS 3 25.08.2009 23:58
Horizontales Ausrichten von input (type=text) cross-browser kuhn CSS 0 08.05.2009 09:57
Verschachtelte Listen als lomtas CSS 6 03.02.2009 15:05
div ausrichten ohne Textumfluss Simon_B CSS 1 03.02.2006 00:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:14 Uhr.