CSS/HTML Boîtes côte à côte
Avoir des problèmes pour récupérer mes 4 cases grises sont affichés sur la même ligne. La pensée, en leur donnant à chacun un 25% de la largeur, ils seraient automatiquement à chaque affichage d'un 1/4 de la taille de l'écran peu importe ceux résolution ou la taille de l'écran. Obtenez les 3 premiers, mais le quatrième, on descend sur la ligne suivante. Toutes les idées sur la façon de forcer tous sur la même ligne?
HTML
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
CSS
.b1, .b2, .b3, .b4{
display:inline-block;
position: relative;
margin: 5px;
float:left;
width:25%;
height:400px;
background-color: lightgrey;
}
OriginalL'auteur rthrdyjd ryjrydjg | 2013-09-26
Vous devez vous connecter pour publier un commentaire.
Prendre un coup d'oeil à la Modèle de Boîte CSS. La raison pour laquelle ils ne sont pas flottant côte à côte sur la même ligne c'est parce que vous êtes en train d'ajouter une marge. Cette marge n'est pas considérée dans la hauteur ou la largeur de votre zone de contenu. Si vous avez utilisé autre chose que de la marge, vous pouvez utiliser le box-sizing bien, mais ce n'est pas la meilleure approche. Idéalement, vous feriez compenser votre marge, donc quelque chose comme cela jsFiddle devrait vous obtenir a commencé.
Obligatoire plus: les largeurs d'ajouter jusqu'à 92% laissant 8% de travailler avec, donc si vous ajouter une marge à gauche de 1% et de la marge à droite de 1%, qui est multiplié par 4 éléments à l'aide de la propriété de marge (vous donne 8% de la largeur requise), vous avez 100% de la largeur de compte.
HTML
CSS
float:left
il n'y a aucune raison d'avoirdisplay:inline-block;
Ouais, d'accord... j'étais juste attaquer le problème à la main.
c'était plus pour l'OP que pour vous. J'ai pensé que vous venez de modifier ce qui doit être changé pour que ça marche.
OriginalL'auteur incutonez
Donner un coup de cette
HTML
CSS
Comme vous pouvez le voir avec la largeur, nous utilisons calc() et l'utilisation de l'original de 25% de la largeur de moins le 10px de marge à gauche et à droite.
OriginalL'auteur Darren
Votre marge est de ce qui est à l'origine du problème. Regardons cela de cette façon, chacune des 4 divisions exige 25% de la largeur de la page, PLUS un de 5 pixels de la marge de gauche et un de 5 pixels de la marge de droite. Si vos marges doivent être de pourcentage ou vous avez besoin de diminuer le pourcentage de la largeur de chaque div afin de permettre la marge.
display: block
et pasinline-block
que ce dernier va obéir unique des espaces entre eux.OriginalL'auteur Ken Hannel