2010-12-02 14 views

Respuesta

10

Pruebe esto para todos los divs.

display:inline-block; 
+0

+1 pantalla: ¡en línea no es lo suficientemente flexible y las carrozas están desordenadas! –

1

Hacer flotar:

HTML


<div class="container1"></div> 
<div class="container2"></div> 
<div class="clear"></div> 

CSS


.clear { clear: both; } 
.container1, .container2 { float: left; } 

Usted tiene que despejar el flotador .. a fin de utilizar borrar ambos :)

9

Simple: use <span> s en su lugar.

<div> por defecto tienen display: block, lo que significa que el siguiente elemento estará en una nueva línea.

Puede cambiarlos a display: inline para obtener el comportamiento que desea. Pero recuerde que un <div> en línea es solo un <span>.

1

El flotador estropea la alineación central de mi página. Esto es lo que obtuve, quiero obtener 2 y 3 en la misma fila sin perder el centrado de la página. Float no funciona porque cuando cambio el tamaño del navegador, se mueve con él.

<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<style type="text/css"> 
.div1 { 
    background: #faa; 
    width: 500; 
} 

.div2 { 
    background: #ffc; 
    width: 400; 
    margin-right: 100px; 
} 
.div3 { 
    background: #cfc; 
    width: 100; 
    margin-left: 400px; 

} 


</style> 
</head> 

<html> 
<body> 
<center> 

<div class="div1"> This is no 1</div> 
<div class="div2"> This is no 2</div> 
<div class="div3"> This is no 3</div> 

</center> 
</body> 
</html> 
2

Utilice un contenedor div y coloque dentro de todos sus divs.

.div_container{ 
    display: flex; 
    flex-direction: row; 
} 

Eso fácil!

Cuestiones relacionadas