Ya he conseguido implementarlo correctamente en CSS. No obstante me surgen un par de dudas. La primera es saber si ustedes piensan que mi metodología es adecuada o si por el contrario, existe alguna más óptima. Y la segunda duda es en cómo centrar el texto verticalmente.
Adjunto el código. Un saludo y gracias.
Código:
<section id="app" class="container">
<div class="col-md-12" id="contenedor_padre">
<div class="container" id="box1">
<div class="container" id="tick">
<p class="tick">T</p>
</div>
<div class="container" id="id_sh">
<p class="id_sh1">001</p>
<p class="id_sh2">170810</p>
</div>
</div>
<div class="container" id="box2">
<div class="container" id="reloj">
<p class="reloj">01:30</p>
</div>
</div>
<div class="container" id="box3">
<div class="container" id="cambio_1">1</div>
<div class="container" id="cambio_2">2</div>
<div class="container" id="id_m">M17</div>
</div>
<div class="container" id="box4">
<div class="container" id="sab">UUU/MMM</div>
</div>
</section>
Y aquí el CSS:
Código:
/* Contenedor padre que hará filas */
div#contenedor_padre {
padding: 4px;
margin: 0px;
width: 100%;
height: 250px;
background: white;
border: gray 2px solid
}
/* Subcontenedores(4) con los atributos para cada servicio */
div#box1{
margin-right: 1%;
margin-bottom: 2%;
padding: 1px;
float:left;
width: 20%;
height: auto;
background-color: black;
}
div#box2{
margin-right: 1%;
margin-bottom: 2%;
padding: 1px;
float:left;
width: 29%;
height: auto;
background: black;
}
div#box3{
margin-right: 1%;
margin-bottom: 2%;
padding: 1px;
float:left;
width: 19%;
height: auto;
background: black;
}
div#box4{
margin-bottom: 2%;
padding: 1px;
float:left;
width: 29%;
height: auto;
background: black;
}
/*Estilo de cada uno de los divs dentro de un BOX */
/*BOX 1*/
div#tick {
width: 100%;
height: 30px;
float: top;
background-color: #51B01B;
border: 1px solid black;
vertical-align: middle;
}
p.tick {
font-size: 17px;
font-weight: bold;
color:black;
text-align: center;
vertical-align: middle;
}
div#id_sh {
float: bottom;
width: 100%;
height: 70px;
background: white;
border: 1px solid black;
}
p.id_sh1 {
font-size: 17px;
color:black;
text-align: center;
margin-top: 15px;
}
p.id_sh2 {
font-size: 12px;
color:black;
text-align: center;
margin-top: 0px;
}
/*BOX 2*/
div#reloj {
width: 100%;
height: 100px;
background: #DDDEDD;
border: 1px solid black;
}
p.reloj {
font-size: 20px;
color:black;
text-align: center;
margin-top: 35px;
}
/*BOX 3*/
div#cambio_1 {
float: left;
width: 50%;
height: 30px;
background: #51B01B;
border: 1px solid black;
}
div#cambio_2 {
float:right;
width: 50%;
height: 30px;
background: #8F1C0E;
border: 1px solid black;
}
div#id_m {
float:left;
width: 100%;
height: 70px;
background: #DDDEDD;
border: 1px solid black;
}
/*BOX 4*/
div#sab {
width: 100%;
height: 100px;
background: #DDDEDD;
border: 1px solid black;
}
Así es como se vería: El problema surge como pueden ver en cómo centrar verticalmente los textos (sin generar más divs que ya no se ni qué nombres ponerles xD)
Link por si no se ve correctamente:
http://es.tinypic.com/r/swydd5/9
Sal2!