meine divs horizontal fließen

Unabhängig davon, was ich versucht habe, kann ich nicht meine inneren divs horizontal innerhalb der äußeren div fließen zu bekommen. Bitte helfen !!!meine divs horizontal fließen

<style type="text/css"> 

#gallery { 
width: 688px; 
height: 360px; 
border: solid; 
} 

#galleryelements { 
width: 650px; 
height: 320px; 
display:inline; 
background-color:#0FF; 
} 

.s-thumbnail { 
width: 50px; 
height: 75px; 
border: solid; 
} 

.thumbnail { 
width: 100px; 
height: 150px; 
border: solid; 
} 

#left { 
float:left; 
} 

#right { 
float:right;  
} 

#Mimage { 
width: 200px; 
height: 300px; 
border: solid; 
} 
</style> 

<body> 
<div id="gallery"> 
<div id="galleryelements"> 
<div class="s-thumbnail" id="left"></div> 
<div class="thumbnail" id="left"></div> 
<div id="Mimage"></div> 
<div class="thumbnail" id="right"></div> 
<div class="s-thumbnail" id="right"></div> 
</div> 
</div> 
</body> 
</html>

Quelle

2010-11-29 E.E.33

Ein ID-Attribut sollte auf das Element eindeutig sein. Ich weiß nicht, ob das der Grund ist, aber es ist ein ungültiger HTML-Code. – Hamish

Danke Hamish. Ich werde das korrigieren –

Mögliche Duplikate von [CSS - Make divs horizontal ausrichten] (http://stackoverflow.com/questions/37103/css-make-divs-align-horizontal) – user

ist es das, was Sie meinen? http://jsfiddle.net/SebastianPataneMasuelli/xtdsv/

HTML:

<div id="gallery"> 
    <div id="galleryelements"> 
     <div class="s-thumbnail left" id=""></div> 
     <div class="thumbnail left" id="left"></div> 
     <div id="Mimage"></div> 
     <div class="thumbnail right" id=""></div> 
     <div class="s-thumbnail right" id=""></div> 
    </div> 
</div>

CSS:

#gallery { 
    width: 688px; 
    height: 360px; 
    border: 1px solid red; 
} 

#galleryelements { 
    width: 650px; 
    height: 320px; 
    background-color:#0FF; 
    display: block; 
} 

.s-thumbnail { 
    width: 50px; 
    height: 75px; 
    border: solid; 
} 

.thumbnail { 
    width: 100px; 
    height: 150px; 
    border: solid; 
} 

.left { 
    float:left; 
} 

.right { 
    float:left;  
} 

#Mimage { 
    width: 200px; 
    height: 300px; 
    border: 1px solid green; 
    float: left; 
}

Quelle

2010-11-29 22:09:30

Danke! Dies ist perfekt. diese JSFiddle ist die Biene-Knie. ist das neu? –

das ist die Biene-Knie! – Leslie

JSFiddle ist relativ neu, denke ich. froh, dass es geholfen hat. Tipp: Verbessere hilfreiche Antworten und akzeptiere die richtige Antwort, da dies großartige Antworten für alle bietet. viel Glück Coding Kumpel! –

Sie sollen nie mehr als ein Element auf der Seite mit der gleichen ID.

Versuchen Sie

<div class="s-thumbnail left"></div> 
<div class="thumbnail left"></div> 
<div id="Mimage"></div> 
<div class="thumbnail right"></div> 
<div class="s-thumbnail right"></div>

und ändern Sie dann Ihr CSS von #links und #rechts zu .links und .rechts.

div # Mimage muss floated sein, ansonsten wird es die gesamte Breite überspannen und die anderen Floats nach unten schieben.

Quelle

2010-11-29 22:06:07 simshaun

+1 für den Weg voran –

Es scheint, dass Sie Ihre Klassen und IDs verwechselt haben. Sie verwenden die linken und rechten IDs erneut. Wahrscheinlich möchten Sie auch einen Schwebeflug auf Mimage, damit er horizontal angezeigt wird.

Ich habe Ihren Code leicht geändert, sollte das Ergebnis aussehen?

http://jsfiddle.net/WcEAb/1/

Quelle

2010-11-29 22:07:58 Gazler

danke! nicht für die Hilfe! –

+1 für eine großartige Lösung –

@ Guided33 Ich glaube, Sie haben versehentlich das Wort "nicht" dort hinzugefügt. – Gazler

meine divs horizontal fließen

Antwort

Verwandte Themen