Quelle est la meilleure façon de positionner un div en CSS ?

StackOverflow https://stackoverflow.com/questions/61155

  •  09-06-2019
  •  | 
  •  

Question

J'essaie de placer ce menu :

<div class="left-menu" style="left: 123px; top: 355px">  
    <ul>  
        <li> Categories </li>  
        <li> Weapons </li>  
        <li> Armor </li>  
        <li> Manuals </li>  
        <li> Sustenance </li>  
        <li> Test </li>  
    </ul>  
</div>

Sur le côté gauche de la page.Le problème est que si j'utilise des valeurs absolues ou fixes.
Différentes tailles d'écran rendront la barre de navigation différemment.J'ai aussi un deuxième div qui contient tout le contenu principal qui doit également être déplacé vers la droite. Jusqu'à présent, j'utilise des valeurs relatives qui semblent fonctionner quelle que soit la taille de l'écran.

Était-ce utile?

La solution

float est en effet la bonne propriété pour y parvenir.Cependant, l'exemple donné par bmatthews68 peut être amélioré.La chose la plus importante à propos des boîtes flottantes est qu'elles doit spécifiez une largeur explicite.Cela peut être plutôt gênant, mais c'est ainsi que fonctionne CSS.Cependant, notez que px est une unité de mesure qui n'a pas sa place dans le monde HTML/CSS, du moins pas pour spécifier les largeurs.

Recourez toujours à des mesures qui fonctionneront avec différentes tailles de police, c'est-à-diresoit utiliser em ou %.Désormais, si le menu est implémenté comme un corps flottant, cela signifie que le contenu principal flotte « autour » de lui.Si le contenu principal est plus haut que le menu, ce n'est peut-être pas ce que vous souhaitez :

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>

Vous pouvez corriger ce comportement en attribuant au contenu principal un margin-left égale à la largeur du menu :

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>

Dans la plupart des cas, vous souhaitez également attribuer au contenu principal un padding-left donc il ne « colle » pas trop au menu.

À propos, il est trivial de modifier ce qui précède pour que le menu soit sur le côté droit au lieu de gauche :changez simplement chaque occurrence du mot « gauche » par « droite ».

Ah, une dernière chose.Si le contenu du menu est supérieur au contenu principal, le rendu sera étrange car float fait des choses étranges.Dans ce cas, vous devrez décocher la case qui se trouve sous le corps flottant, comme dans l'exemple de bmatthews68.

/MODIFIER:Bon sang, HTML ne fonctionne pas comme l'aperçu le montrait.Eh bien, j'ai inclus des photos à la place.

Autres conseils

Je pense que tu es censé utiliser le flotter propriété pour positionner des choses comme ça. Vous pouvez lire à ce sujet ici.

Toutes les réponses indiquant d'utiliser des flotteurs (avec des largeurs explicites) sont correctes.Mais pour répondre à la question initiale, quelle est la meilleure façon de positionner un <div>?Ça dépend.

CSS est hautement contextuel et le flux d'une page dépend de la structure de votre HTML.Le flux normal correspond à la manière dont les éléments et leurs enfants seront disposés de haut en bas (pour les éléments de bloc) et de gauche à droite (pour les éléments en ligne) à l'intérieur de leur bloc conteneur (généralement le parent).C’est ainsi que devrait fonctionner la majorité de votre mise en page.Vous aurez tendance à compter sur width, margin, et padding pour définir l'espacement et la disposition des éléments par rapport aux autres éléments qui l'entourent (qu'ils soient <div>, <ul>, <p>, ou autrement, HTML est principalement sémantique à ce stade).

Utiliser des styles comme float ou absolute ou relative Le positionnement peut vous aider à atteindre des objectifs très spécifiques de votre mise en page, mais il est important de savoir comment les utiliser.Comme cela a été expliqué, float est généralement utilisé pour placer des éléments de bloc les uns à côté des autres, et c'est très bien pour les dispositions à plusieurs colonnes.

Je n'entrerai pas dans les détails ici, mais vous voudrez peut-être consulter les éléments suivants :

Vous devez utiliser les attributs CSS float et clear pour obtenir l'effet souhaité.

J'ai d'abord défini des styles pour la gauche et la droite appelées pour les deux colonnes de ma mise en page et un style appelé plus clair utilisé pour réinitialiser le flux des pages.

<style type="text/css">
.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 800px;
}
.clear {
    clear: both;
    height: 1px;
}
</style>

Ensuite, je les utilise pour mettre en page ma page.

<div>
 <div class="left">
   <ul>
    <li>Categories</li>
    <li>Weapons</li>
    <li>Armor</li>
    <li>Manuals</li>
    <li>Sustenance</li>
    <li>Test</li>
  </ul> 
 </div>
 <div class="right">
   Blah Blah Blah....
 </div>
</div>
<div class="clear" />

tu peux utiliser float

<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>

dans le fichier CSS

.left-menu{float:left;width:200px;}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top