Mettre les divs ci-dessous float:left divs
J'essaie d'avoir un site qui a la structure de base:
<1 div>
<3 divs next to each other>
<1 div>
Les 3 divs sont float:left afin de faire être sur le même niveau. Cependant, ils 5ème div (en bas) en quelque sorte se déplace vers le haut de la 3 divs dans IE, et montré que, comme dans Chrome, même si le contenu est en dessous de la 3 divs.
Je pense que j'ai juste fait un peu paresseux de codage ici, mais ne savez pas vraiment mieux.
Je suis actuellement a:
<div id="results">
<!-- Ajax Content Here -->
</div>
<div id="leftpanel">
</div>
<div id="photo">
</div>
<div id="top3">
</div>
<div id="voting">
</div>
Les résultats est le plus haut, leftpanel, photo et top3 sont le moyen de 3, alors que le vote est en dessous de la 3.
CSS de base est :
#leftpanel {
float:left;
width:20%;
height: 600px;
}
#top3 {
float: left;
width:20%
}
#photo {
width: 60%;
float:left;
text-align: center;
}
#voting {
width: 500px;
height: 250px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#results{
width: 300px;
height: 20px;
margin-left: auto;
margin-right:auto;
margin-bottom: 5px;
text-align: center;
}
Je suis sûr que c'est quelque chose de stupide, je suis en train de faire, de sorte que toute entrée est appréciée, je pourrais l'utiliser pour apprendre à le faire correctement 🙂 j'avais déjà un div contenant sur les 3 du milieu de la vrd, mais cela n'a pas fonctionné depuis le changement de taille. Peut-être que j'ai besoin de le faire, mais d'une manière différente?
OriginalL'auteur Joseph Duffy | 2011-10-13
Vous devez vous connecter pour publier un commentaire.
Plutôt que de travailler avec des chars, vous pourriez envisager de simplement réglage de l'affichage de l'attribut moyen divs "inline-block". Rappelez-vous que la valeur par défaut, les éléments div avoir un bloc d'affichage, ce qui signifie qu'ils prennent toute la largeur de son élément parent, même si sa largeur est inférieure à la mère de largeur. inline blocs d'autre part s'emboîtent comme les pièces d'un puzzle, et le flux horizontalement plutôt que verticalement. Je pense que ce serait faire de votre code beaucoup plus propre que de traiter avec des flotteurs. Voici une démo:
http://jsfiddle.net/scMFC/
OriginalL'auteur Eric Rowell
ajouter
clear: both
pour le bas de la div, afin de ne pas être influencé par le flottant d'autres divs.OriginalL'auteur GolezTrol
Vous devez effacer les flotteurs. Si
#voting
est votre cinquième div ajouter ceci dans votre css.#voting{clear:both}
devrait faire l'affaire
OriginalL'auteur locrizak