Problema de maquetación a 4 columnas
No se si este es el sitio donde tengo que preguntar esto, pero ahí va mi duda. Estoy haciendo mi primera página web, y en una de las partes quiero maquetar con 4 columnas, de diferentes medidas cada una, y que se adapten a diferentes medidas al cambiar la visión en otro dispositivo con diferente pantalla. ¿Es posible?.
1 respuesta
Yo en casos como el tuyo opto por maquetar la web con columnas que vienen definidas por un width en %, y no en px como se suele poner... con ese tipo de maquetación, tu puedes decidir que % del bloque quieres ocupar, y sea cual sea el dispositivo o medida de la pantalla en la que se vea la web, se mantendrán las proporciones... aunque para ello, antes hay que definir un bloque que englobe todas las columnas, y a este bloque hay que definirle un width fijo, te pongo un ejemplo:
HTML
<div id="recuadroprincipal"> <div id="bloque1"> <div id="bloque1texto"></div> </div> <div id="bloque2"> <div id="bloque2texto"></div> </div> <div id="bloque3"> <div id="bloque3texto"></div> </div> <div id="bloque4"> <div id="bloque4texto"></div> </div> </div>
CSS
#recuadroprincipal{width: 900px; float:left;}
#bloque1{float: left; width: 10%}
#bloque1texto{}
#bloque2{float: left; width: 40%}
#bloque2texto{}
#bloque3{float: left; width: 40%}
#bloque3texto,table{}
#bloque4{float: left; width: 10%}
#bloque4texto{}
