4 colonnes de mise en page CSS - Liquide
Je vais tourner en rond en essayant de le comprendre.
HTML/CSS:
<style type='text/css'>
#content {
padding: 20px;
background: #F3F6F7;
}
.inner-box {
background: #fff;
}
.inner-box .col {
background:#eee;
display:block;
float:left;
margin:1%;
padding:20px;
width:23%;
}
</style>
<div id="content">
<div class="inner-box clearfix">
<div class="col col-1">
COl1
</div>
<div class="col col-2">
COl2
</div>
<div class="col col-3">
COl3
</div>
<div class="col col-4">
COl4
</div>
</div>
</div>
En gros, je veux un fluide 4 colonnes de mise en page avec un peu de rembourrage autour de chaque colonne et le tout pour durée de 100% à travers l'écran.
Le code ci-dessus fonctionne, mais dès que je l'échelle du navigateur de la 4ème colonne sur la droite pour passer sous le reste.
OriginalL'auteur Carpy | 2010-11-25
Vous devez vous connecter pour publier un commentaire.
Personnellement j'ai renoncé à l'aide de flotteurs. Je les trouve trop capricieux pour travailler avec.
J'utilise maintenant
display: inline-block;
à la place de flotteurs. Notez que IE7 et ci-dessous ne prend pas en charge, mais il est d'une exceptionnelle css hack qui fonctionne parfaitement. Utiliser les commentaires conditionnels et un autre fichier CSS pour IE7 et ci-dessous.La Croix-navigateur Inline-Block hack est fantastique pour contourner ce.
Pour tous mes projets, je définir un inline-block classe.
et dans IE fichier CSS, j'ai:
Vous pouvez ensuite mise en page fluide quelconque mises en page facile, placer les divs côté-à-côte et de la fixation d'un pourcentage de la largeur de chacun. J'ai l'habitude de définir une classe qui représente un pourcentage fixe largeur
De sorte que votre html résultant pourrait ressembler à ceci:
Maintenant, vous pourriez vous demander pourquoi j'ai l'ouverture
div
balises sur la même ligne que le précédent balise de fermeture. C'est parce queinline-block
respecte les espaces et cela va casser la mise en page. Vous pouvez lire plus sur ce problème et les moyens de les atténuer ici: http://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/Peu juste de égare, mais le résultat est que Vous pouvez faire vraiment bien fluide mises en page sans avoir à bite autour avec flotteur mises en page.
overflow:hidden
ensemble sur les éléments.Votre réponse est complète et il fonctionne. Mon seul problème est que
class="inline-block twenty-five-perc"
n'est pas sémantique. Vous pourriez aussi bien mettre dans l'attribut de style 🙂Je suis d'accord avec le
twenty-five-perc
, c'est un personnel affectation, mais lainline-block
est nécessaire de définir pour l'IE hack pour être à l'échelle du site.Il est nécessaire dans le CSS, mais dans le code Html, vous pouvez toujours lui donner un plus descriptif classname en place de
class="inline-block"
. Mis à part cela je suis convaincu que cet exemple particulier serait mieux avec un positionnement absolu.OriginalL'auteur Alastair Pitts
Quelques pensées.
Tout d'abord, vous n'avez pas besoin du clearfix div. À l'aide de
overflow:hidden
sur#content
est une meilleure façon de gérer cela. Si votre code HTML ressemble à ceci:C'est plus propre. Deuxièmement,
div
s sont les éléments de niveau bloc, de sortedisplay:block;
est inutile.Aussi, sauf si vous utilisez des unités flexibles pour vos gouttières, que vous pourrez rencontrer un problème lorsque la fenêtre devient plus petite que votre colonne des pourcentages permettent. Je voudrais suggérer à l'aide de pourcentages pour les gouttières. Rappelez-vous que les pourcentages sont des pourcentages par rapport à l'élément parent, donc
.col
sera un pourcentage de#content
.Puisque vous êtes à l'aide de chars et de chaque colonne a sa propre classe disponible, il est facile d'ajouter le caniveau comme un droit de la marge, et de le mettre à 0, sur la dernière.
N'est donc pas seulement votre balisage plus simple, mais le CSS ainsi:
Notez aussi comment (22% * 4) + (4% * 3) = 100%.
Espère que cette aide. Voir http://jsfiddle.net/D759g/ pour un exemple.
OriginalL'auteur stephenhay
Je voudrais utiliser le positionnement absolu dans cette mise en page. À mon avis, la solution la plus fiable. De Plus, vous pouvez modifier le rembourrage sans casser votre mise en page. De Plus, vous pouvez ajouter une bordure et la marge, pas de problème.
noter que le
left
valeur d'une colonne et laright
valeur de la colonne précédente est toujours de 100%REMARQUE: cela ne fonctionne pas avec ie6.
Je ne comprends pas votre question. Rien n'est flottait dans cette mise en page. Il suffit de remplacer votre CSS dans l'exemple avec le mien. La compensation des flotteurs est une mauvaise pratique. Utilisation
overflow: auto;
sur un récipient pour l'enrouler autour de flottant de contenu.Compensation des chars avec vide ou des éléments invisibles pour le récipient s'enrouler autour du contenu " est ce que je voulais dire, bien sûr.
Il semble que la position absolue de la prend par les cols de la .intérieur de la boîte enveloppe de sorte à l'intérieur de la boîte n'a pas de durée de passé le col est plus (la hauteur de la houle). C'est comme le height: 100% ne semble pas faire quoi que ce soit.
Essayez cet exemple où j'ai changé le fond de .intérieur de la boîte rouge jsfiddle.net/FHN8F/2. Il fonctionne pour moi sur Chrome, Firefox et ie8. (J'ai découvert il y a un problème avec elle dans google Chrome: code.google.com/p/chromium/issues/detail?id=65912)
OriginalL'auteur Jan
Je vais l'essayer avec quelque chose d'un peu moins de 23%: élément du DOM frontières, le rembourrage, les marges, etc sont ajoutés à la largeur de l'élément, au lieu de devenir une partie de la largeur. Je suppose que vous êtes mise à l'échelle du navigateur, ce qui les échelles, les pourcentages, mais pas le pixel fixe les rembourrages, etc, ce qui signifie qu'il est plus de remplissage par rapport à la largeur interne, rendant les colonnes un peu trop grande pour le 100% de largeur.
Espère que cette aide,
James
OriginalL'auteur Bojangles
Avoir certaines valeurs fixe de pixels va vous causer des ennuis.
Assurez-vous que tous les rembourrages et les marges et le contenu de l'égalité, un total de 99% - j'ai trouvé Mozilla a du mal lorsque toutes les valeurs égales à 100%.
OriginalL'auteur dpmguise
Voici la façon la plus simple de le faire à 2, 3 ou 4 colonnes de la liste. Il suffit d'ajuster les pourcentages à l'égalité de 99% de la page (ou 100 dans ce cas).
Ce n'est pas la bonne réponse à la question.
OriginalL'auteur user10066548