<!DOCTYPE html>
<html lang="es">
<head>
<style>
.ladoIzq {
border:1px solid #000;
width: 225px;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.zonaCarga {
padding-left: 225px;
padding-top: 10px;
float: left;
width: 100%;
}
.claseDiv {
position:relative;
margin-bottom:20px;
display: table;
}
.claseDiv:before {
content: "";
width:62px;
height:72px;
top:10px;
left:10px;
background-image: url('./1.jpg');
background-size:cover; /* para que la imagen ocupe todo el ancho y alto del div */
float:left;
}
</style>
</head>
<body>
<aside class="ladoIzq">
MENU IZQ
</aside>
<section class="zonaCarga">
<div class="claseDiv">hola</div>
<div class="claseDiv">hola</div>
<div class="claseDiv">hola</div>
<div class="claseDiv">hola</div>
</section>
</body>
</html>
Si se quisiera poner otra imagen a la derecha del texto:
.claseDiv:after {
content: "";
width:62px;
height:72px;
top:10px;
right:0;
background-image: url('./2.jpg');
background-size:cover; /* para que la imagen ocupe todo el ancho y alto del div */
float:right;
}
De todos modos lo más aconsejable es siempre usar Bootstrap para facilitar todo con los rows.
No hay comentarios:
Publicar un comentario