CSS - Ajustar div a % de pantalla con imagen y texto en la misma línea

 
Vista:
sin imagen de perfil

Ajustar div a % de pantalla con imagen y texto en la misma línea

Publicado por mglinaje (2 intervenciones) el 09/02/2017 16:56:05
Hola,
Lo que intento hacer: un div que ocupe el 94% de la pantalla, a la izquierda una imagen, a la derecha un texto, ambos bloques en una misma línea.
Mi código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="logocontenedor">
 
    	<div class="logocontenedorcentral">
 
           <a href="index.asp"><img class="logoimagen" src="images/logo.png" /></a>
 
		<div class="logotexto">
            	<p class="fecha"> linea 1</p>
                <p class="lugar">linea 2</p>
                <p class="lugar">linea 3</p>
 			</div>
 
 	  </div>
</div>

Los estilos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.logocontenedor {
	width: 100%;
	background-color: #002987;
	padding-top: 20px;
	padding-bottom: 20px;
}
 
.logocontenedorcentral {
	width: 94%;
	margin-left: auto;
	margin-right: auto;
}
 
.logoimagen {
	width:100%;
	max-width:630px;
	display:inline-block;
}
 
.logotexto {
	text-align:right;
	width:100%;
	max-width:100%;
	color:#FFFFFF;
	display:inline-block;
}
 
p.fecha {
	font-size:18pt;
	line-height: 100%;
}
 
p.lugar {
	font-size:12pt;
	line-height: 60%;
}

Pues no consigo que la imagen y el texto estén en la misma línea ocupando el 94% de la pantalla. Cuando consigo que el texto esté en la misma línea es fijando el width y en ese caso no ocupa el % de pantalla que me interesa. Supongo que es muy fácil pero no doy con ello :(.
Gracias por la ayuda.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 45
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ajustar div a % de pantalla con imagen y texto en la misma línea

Publicado por Brayan (16 intervenciones) el 09/02/2017 18:43:51
Acomode un poco tu codigo lo hice todo en un archivo html y creo que funciono para lo que tu deseas:

Si necesitas que explique algo me avisas, es que no tengo mucho tiempo ahorita para explicarlo como hago en la mayoria de los casos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style>
 
.logocontenedor {
width: 100%;
background-color: #002987;
padding-top: 20px;
padding-bottom: 20px;
}
 
.logocontenedorcentral {
width: 94%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
}
 
.logoimagen {
width:100%;
max-width:630px;
display:inline-block;
}
 
.logotexto {
text-align:right;
width:100%;
max-width:100%;
color:#FFFFFF;
display:inline-block;
}
 
p.fecha {
font-size:18pt;
line-height: 100%;
}
 
p.lugar {
font-size:12pt;
line-height: 60%;
}
</style>
<div class="logocontenedor">
 
<div class="logocontenedorcentral">
<div>
<a href="index.asp"><img class="logoimagen" src="images/logo.png" /></a>
</div >
<div class="logotexto">
<p class="fecha"> linea 1</p>
<p class="lugar">linea 2</p>
<p class="lugar">linea 3</p>
</div>
 
</div>
</div>

NOTA: hice la prueba con otra imagen motivado a que obviamente no tengo la que tienes en ruta, sin embargo te coloque tu linea exactamente igual
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Ajustar div a % de pantalla con imagen y texto en la misma línea

Publicado por mglinaje (2 intervenciones) el 10/02/2017 09:46:08
Perfecto! Gracias por tu tiempo!!!.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 45
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ajustar div a % de pantalla con imagen y texto en la misma línea

Publicado por Brayan (16 intervenciones) el 10/02/2017 13:16:46
De nada amigo estamos para ayudarnos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar