Engraellat de caixes
Publicat el 03/09/2006
Artícle original: Rejilla con lista y problema con Explorer per en Choan
Es vol aconseguir que donada una llista de caixes quedin encolumnades les imparells per una banda i les parells per l'altre però que les parelles imparell-parell comencin sempre a la mateixa alçada.
Donat un XHTML:
<ul>
<li class="imparell">Lorem...</li>
<li>Phasellus...</li>
<li class="imparell">Aenean...</li>
<li>Sed et...</li>
</ul>
Aplicant un CSS
ul {
margin: 0;
padding: 0;
list-style: none;
width: 400px;
}
li {
background: lightgreen;
width: 50%;
float: right;
}
li.imparell {
background: lightblue;
float: left;
clear: both;
}
Aquesta solució funciona per navegadors tipus Firefox, Opera i Safari però no pas per Internet Explorer.
Per fer reaccionar Internet Explorer de la manera esperada caldrà modificar les regles de la següent manera:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 400px;
}
li {
background: lightgreen;
width: 50%;
float: right;
_float: none;
}
li.imparell {
background: lightblue;
float: left;
clear: both;
_margin: 0 -3px 0 0
}
S'utilitza el mètode del guió baix per il·lustrar les propietats per Internet Explorer només per comoditat, no perquè es consideri millor.
Comentaris