Comment est-ce que je pousse un flottant droit, si son HTML est après le contenu?
J'ai un la plupart du temps fixe, 2 colonnes, mise en page:
- 1ère colonne qui prend autant de place qu'il doit
- et la 2ème colonne a une largeur fixe et introduction au droit
Je veux en faire un responsive design, donc dans les petites tailles d'écran, la 2ème colonne se termine au-dessous de la 1ère colonne. Cela signifie que le code HTML pour la 2ème colonne après la colonne 1.
Mon problème est que je ne peux pas semblent flotter la colonne de droite correctement lors de l'utilisation de cette marque. Il finit par flottait, mais est en dessous du contenu principal.
Voici un exemple de code:
HTML:
<div class='content'>
sdaohdosahdaf
<br />adfafhaskldjs sgdafadkfjas
<br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class='sidebar'>
daobfhaohfasod agsdjfa
<br />sidjaofhad
<br />sojghfadpfjas
</div>
CSS:
.content {
background-color: lightblue;
margin-right: 120px;
}
.sidebar {
float: right;
width: 120px;
background-color: lightgreen;
}
JS fiddle ici: http://jsfiddle.net/zinkkrysty/U3fA8/
J'ai essayé aussi en utilisant des marges négatives, mais ne semble pas possible de le faire.
Si vous avez d'autres approches à mon problème (à l'exception de réglage de la largeur sur la première colonne), merci de lui donner un aller
source d'informationauteur Cristian
Vous devez vous connecter pour publier un commentaire.
Les mettre dans un parent et de définir la position de la barre latérale comme absolue, puis utiliser un ensemble différent de styles pour la réactivité de l'affichage
html
css
Exemple
Laisser le première div ont un
position:absolute;
et avecleft:0px;
et le choix d'uneright
vous pouvez avoir un fixe flottait droit de div avec une dynamique flottait gauche de la div.DÉMO
HTML
CSS
DÉMO
Essayer comme ci-dessous... il va vous aider à...
Je pense que vous avez besoin comme ça... Essayez la mise à jour du Violon : http://jsfiddle.net/U3fA8/1/
Essayer des marges négatives en %
E. g. margin-top: -10%;
Regardant votre violon JUSTE AJOUTER margin-top:-60px; dans votre .encadré css et il se déplace vers le haut. Votre css ressemble à ceci:
Bâtiment sur @9205892's insight que vous avez besoin d'un autre wrapper
div
j'ai trouvé que vous évitez d'utiliser le positionnement absolu (qui peut créer des problèmes avec le contenu de tout après les deux colonnes), et continuent de faire du responsive design. Viens de mettre les deux sections de "flotter" et de préciser leurs largeurs (j'ai simplement donné les pourcentages). Puis, dans la réactif@media
section, définissez la largeur de chaque section à 100% et le navigateur va les mettre l'un après l'autre.HTML
CSS
Démo (basé sur les démos de l'autre des réponses)
La solution la plus simple serait d'échanger votre contenu et div sidebar.
Au lieu de
Vous n':
Votre css reste le même. Voici à quoi il ressemble, exactement ce que vous cherchez 🙂
http://jsfiddle.net/j1wu/vg08f4ep/