Comunidad de diseño web y desarrollo en internet online

Alinear contenidos

Citar            
MensajeEscrito el 21 Nov 2013 04:07 pm
Hola amigos como podria hacer para que estos tres contenidos se alineen todos en una sola linea osea los tres alineados en ñla misma linea ya intente con el display:inline tambien con overflow:visible y tambien con el vertical-align:middle y nada no lo puedo hacer espero puedan ayudarme, gracias.Aca le mando el codigo.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#contenedor {
width:600px;
height:500px;
border:red 1px solid;


}
#contenido1 {
width:150px;
height:150px;
border:red 1px solid;
margin-top:10px;
}
#contenido2 {
width:150px;
height:150px;
border:red 1px solid;
margin-left:200px;

}
#contenido3 {
width:150px;
height:150px;
border:red 1px solid;
margin-left:200px;
margin-bottom:100px;
}
-->
</style>
/head>

<body>
<div id="contenedor">
<div id="contenido1">wddw</div>
<div id="contenido2">wwew</div>
<div id="contenido3">www</div>
</div>
</body>
</html>

Por jarvi22

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 21 Nov 2013 04:18 pm

Código CSS :

#contenedor > div{display:inline-block;}

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 21 Nov 2013 05:13 pm
hola amigo gracias por la respùesta pero igual no logro ponerlos en linea

Por jarvi22

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 21 Nov 2013 05:15 pm
Quítale margin-left a contenedor 2 y 3

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 21 Nov 2013 05:16 pm
le agregue ese codigo y sale asi mira:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#contenedor {
width:600px;
height:500px;
border:red 1px solid;
display:inline-block;
}
#contenido1 {
width:150px;
height:150px;
border:red 1px solid;


}
#contenido2 {
width:150px;
height:150px;
border:red 1px solid;



}
#contenido3 {
width:150px;
height:150px;
border:red 1px solid;


}
-->
</style>
/head>

<body>
<div id="contenedor">
<div id="contenido1">wddw</div>
<div id="contenido2">wwew</div>
<div id="contenido3">www</div>
</div>
</body>
</html>

Por jarvi22

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 21 Nov 2013 05:18 pm
osea se alinean en forma vertical cuando yo quiero que se alinee en forma horizontal en una sola linea.

Por jarvi22

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 21 Nov 2013 05:19 pm
no le tienes que poner display inline-block a container sino a los divs que tiene dentro... ve el selector que puse

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 21 Nov 2013 05:20 pm
pues ya les puse y nada sigue igual.

<style type="text/css">
<!--
#contenedor {
width:600px;
height:500px;
border:red 1px solid;

}
#contenido1 {
width:150px;
height:150px;
border:red 1px solid;
margin-left:10px;
display:inline-block;
}
#contenido2 {
width:150px;
height:150px;
border:red 1px solid;
display:inline-block;


}
#contenido3 {
width:150px;
height:150px;
border:red 1px solid;
display:inline-block;

}
-->
</style>

Por jarvi22

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 21 Nov 2013 05:29 pm

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 21 Nov 2013 06:54 pm
Hola amigo gracias por la respuesta y si ya logre solucionar el problema resulto y me peudes explicar porque se agrega este codigo
#contenedor>div {
display:inline-block;
}

Por jarvi22

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 21 Nov 2013 06:56 pm
Todos los div's que son hijos directos del #container, hay que tratarlos como si fueran palabras "inline" para que se acomoden uno al lado del otro... pero que sigan siendo bloques, para modificar dimensiones y demás.

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.