haciendo que mis divs fluyan horizontalmente

Independientemente de lo que haya intentado, no puedo hacer que mis div internos fluyan horizonatalmente dentro del div externo. ¡¡¡Por favor ayuda!!!haciendo que mis divs fluyan horizontalmente

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

Fuente

2010-11-29 E.E.33

Un atributo ID debe ser único para el elemento. No sé si esa es la causa específica, pero es HTML no válido. – Hamish

Gracias Hamish. Voy a corregir eso –

Posible duplicado de [CSS - Hacer divs alinear horizontalmente] (http://stackoverflow.com/questions/37103/css-make-divs-align-horizontally) – user

es esto lo que quiere decir? 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; 
}

Fuente

2010-11-29 22:09:30

¡Gracias! esto es perfecto. este JSfiddle es el beez-knees. es esto nuevo? –

que ES el beez-knees! – Leslie

JSFiddle es relativamente nuevo, creo. Me alegro de que ayudó. Sugerencia: envíe respuestas útiles y acepte la correcta, ya que esto alienta respuestas excelentes para todos. buena suerte codificación compañero! –

Usted debe Nunca tener más de un elemento de la página con el mismo ID.

Pruebe

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

y luego cambie su CSS de #left y #right a .left y .right.

div # La imagen debe flotar, sino abarcará todo el ancho y empujará los otros flotadores hacia abajo.

Fuente

2010-11-29 22:06:07 simshaun

+1 por liderar el camino –

Parecería que tiene sus clases y sus id. Mezclados. Está reutilizando los ID izquierdo y derecho. Probablemente también quieras un flotador en Mimage para que se muestre horizontalmente.

He cambiado su código ligeramente, ¿así debería ser el resultado?

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

Fuente

2010-11-29 22:07:58 Gazler

gracias! no por la ayuda! –

+1 para una gran solución –

@ Guided33 Creo que accidentalmente agregó la palabra "no" allí. – Gazler

haciendo que mis divs fluyan horizontalmente

Respuesta

Cuestiones relacionadas