Autor Tema: CSS y HTML cómo colocar dos cajas div en horizontal una al lado de otra CU01029D (Leído 14109 veces)

Boletos · « **en:** 26 de Enero 2016, 03:17 »

Resolviendo el ejercicio del capítulo CU01029D, me surge el problema de que no consigo recordar que se explicara como situar una caja al lado de otra.

Entonces, mirando en el foro, vi algo como esto:

display: inline-block;

Es esta la forma?

Boletos · « **Respuesta #1 en:** 26 de Enero 2016, 03:55 »

Hola amigos de aprender a programar!!! (perdón por no haber saludado antes)

Una vez probado el aspecto anteriormente expuesto. Mi solución al ejercicio 1029d es la siguiente:

Html:

Código: [Seleccionar]

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<meta name="weywords" content="palabras clave">
			<meta name="description" content="Margenes">
			<title>Ejercicio 1029 Margenes</title>
			<link rel="stylesheet" type="text/css" href="Padding.css">
		</head>
		<body>
			<div>
			div 1
			</div>
			<div>
			div 2
			</div>
		</body>
	</html>

Css:

Código: [Seleccionar]

/*Ejercicio 1029 Margin Padding*/
div{width:250px; margin:20px; background-color:#FFB6C1;
	border-top:dotted 15px #DC143C;
	border-right:dashed 10px green;
	border-bottom:double 10px #FF00FF;
	border-left:ridge 40px #2F4F4F;
	padding:30px 15px 0px 60px;
	display:inline-block;}

La caja div tiene un ancho total de:250(width)+20+20(margin)+10(border-right)+40(border-left)+15+60(padding)=415px.

La caja div tiene un alto total de:20+20(margin)+15(border-top)+10(border-bottom)+30(padding)=95px.

La suma de las dos cajas una al lado de la otra es:830px.

Un saludo!!

Boletos · « **Respuesta #2 en:** 26 de Enero 2016, 18:20 »

Hola!!!

Simplemente corregir un error de lectura: el relleno derecho en el enunciado pone 45px, y yo en el ejercicio le di 15px

Además en el cálculo del alto no tuve en cuenta el tamaño del texto.

Conclusión:

ancho div=445px.
ancho div+div (uno al lado del otro)=890px.
alto div=95+tamañoTexto.

Vaya lío. Un saludo!!

Ogramar · « **Respuesta #3 en:** 28 de Enero 2016, 09:04 »

Buenas Boletos como comentas con display: inline-block; puede hacerse que elementos que normalmente tendrían un comportamiento block se comporten como si fueran elementos inline.

Para las respuestas a las preguntas copio desde otro hilo:

PREGUNTA A

div1: 250 px interior + 45 px relleno derecha + 60 px relleno izquierda + 10 px borde derecho + 40 px borde izquierdo

TOTAL div 1: 405 px (añadiendo el margin tendríamos 445 px) Por tanto 445 px respuesta para la pregunta a)

PREGUNTA B

El alto ocupado será variable dependiendo del número de líneas, tamaño de letra dentro del div, etc. es la respuesta para la b)

PREGUNTA C

Como respuesta para la c) tenemos que para los dos div el ancho total ocupado es el doble que para un div, Total para los dos div: 890 px es el ancho total ocupado por los dos div

Salu2

Boletos · « **Respuesta #4 en:** 29 de Enero 2016, 05:02 »

Guay!! Gracias!!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: CSS y HTML cómo colocar dos cajas div en horizontal una al lado de otra CU01029D (Leído 14109 veces)

Boletos

CSS y HTML cómo colocar dos cajas div en horizontal una al lado de otra CU01029D

Boletos

Re:Ejercicio CU01029D margin padding. Una duda.

Boletos

Re:Ejercicio CU01029D margin padding. Una duda.

Ogramar

Re:Ejercicio CU01029D margin padding. Una duda.

Boletos

Re:CSS y HTML cómo colocar dos cajas div en horizontal una al lado de otra CU01029D

Preguntas y respuestas