faire couler mes divs horizontalement

Indépendamment de ce que j'ai essayé, je ne peux pas faire couler mes divs internes horizontalement dans le div externe. S'il vous plaît aider !!!faire couler mes divs horizontalement

<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>

Source

2010-11-29 E.E.33

Un attribut ID doit être unique à l'élément. Je ne sais pas si c'est la cause spécifique, mais c'est un code HTML invalide. – Hamish

Merci Hamish. Je vais corriger cela –

Possible copie de [CSS - Faire divs aligner horizontalement] (http://stackoverflow.com/questions/37103/css-make-divs-align-horizontally) – user

est ce que vous voulez dire? 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; 
}

Source

2010-11-29 22:09:30

Merci! c'est parfait. ce JSfiddle est le beez-genoux. est-ce nouveau? –

QUI EST les beez-genoux! – Leslie

JSFiddle est relativement nouveau je pense. content que cela a aidé. Astuce: upvote les réponses utiles et acceptez la bonne, car cela encourage de bonnes réponses pour tout le monde. bonne chance codage mate! –

Vous devriez jamais avoir plus d'un élément sur la page avec le même ID.

Essayez

<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>

, puis modifiez votre CSS de #left et #right à .left et .right.

div # Mimage doit être flotté, sinon il s'étendra sur toute la largeur et poussera les autres flotteurs vers le bas.

Source

2010-11-29 22:06:07 simshaun

+1 pour ouvrir la voie –

Il semblerait que vos classes et ID soient mélangés. Vous réutilisez les identifiants gauche et droit. Vous voulez probablement un flotteur sur Mimage pour le faire afficher horizontalement.

J'ai légèrement modifié votre code, est-ce que le résultat devrait ressembler à cela?

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

Source

2010-11-29 22:07:58 Gazler

merci! pas pour l'aide! –

+1 pour une excellente solution –

@ Guided33 Je pense que vous avez accidentellement ajouté le mot "pas" là. – Gazler

Répondre

Questions connexes