
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:
Los estilos:
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.
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


0