Was ist der beste Weg, um ein div in CSS zu positionieren?

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

  •  09-06-2019
  •  | 
  •  

Frage

Ich versuche, dieses Menü zu platzieren: 

<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>

Auf der linken Seite der Seite. Das Problem ist, dass, wenn ich absolut oder feste Werte.
Verschiedene Bildschirmgrößen werden die Navigationsleiste anders machen. Ich habe auch eine zweite div, die alle den Hauptinhalt enthält, die auch nach rechts bewegt werden muss, so weit ich relative Werte bin mit Unabhängig davon, welche die Bildschirmgröße zu funktionieren scheint.

War es hilfreich?

Lösung

float ist in der Tat die richtige Eigenschaft dieses Ziel zu erreichen. Angesichts das Beispiel durch bmatthews68 verbessert werden kann. Das Wichtigste über Floating-Boxen ist, dass sie muss geben Sie eine explizite Breite. Dies kann ziemlich lästig sein, aber das ist die Art, wie CSS funktioniert. Beachten Sie jedoch, dass px ist eine Maßeinheit, die keinen Platz in der Welt der HTML / CSS hat, zumindest nicht Breiten angeben.

Immer auf Maßnahmen zurückgreifen, die mit verschiedenen Schriftgrößen arbeiten, das heißt entweder die Verwendung em oder %. Nun, wenn das Menü als Schwimmkörper realisiert wird, dann bedeutet dies, dass der Hauptinhalt „um“ es schwimmt. Wenn der Haupt-Gehalt höher als das Menü ist, könnte dies nicht das, was Sie wollen:

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>

Sie können dieses Verhalten korrigieren, indem Sie den Hauptinhalt ein margin-left gleich die Breite des Menüs geben:

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>

In den meisten Fällen können Sie auch dem Hauptinhalt eine padding-left geben wollen, damit es nicht „kleben“, um das Menü zu eng.

By the way, es trivial ist das oben so zu ändern, dass das Menü auf der rechten Seite ist statt links. Einfach jedes Vorkommen des Wortes ändern „links“ nach „rechts“

Ah, eine letzte Sache. Wenn der Inhalt des Menü höher als der Hauptinhalt ist, wird es machen seltsam, weil float einige seltsame Dinge tut. In diesem Fall erhalten Sie die Box, die unter dem Schwimmkörper kommt, wie in bmatthews68 des Beispiel löschen müssen.

/ EDIT: Verdammt, HTML funktioniert nicht so, wie die Vorschau es zeigte. Nun, ich habe Bilder enthalten statt.

Andere Tipps

Ich glaube, Sie sollen die float Eigenschaft für die Positionierung Dinge wie das verwenden. Sie können hier darüber lesen.

Alle Antworten sagen Schwimmer zu verwenden (mit expliziter Breite) korrekt sind. Aber die ursprüngliche Frage zu beantworten, was ist der beste Weg, um eine <div> zu positionieren? Es hängt davon ab.

CSS ist sehr kontextuelle, und der Ablauf einer Seite auf die Struktur Ihres HTML abhängig. Normaler Durchfluss ist, wie Elemente, und ihre Kinder, von oben nach unten Layout werden (für Blockelemente) und von links nach rechts (für Inline-Elemente) in ihrem umschließenden Block (in der Regel der Eltern). Dies ist, wie die Mehrheit Ihres Layouts funktionieren soll. Sie neigen dazu, auf width, margin und padding zu verlassen, um den Abstand und die Anordnung der Elemente auf die anderen Elemente um sie zu definieren (seien sie <div>, <ul>, <p> oder auf andere Weise, HTML ist an dieser Stelle vor allem semantische).

Stile wie float oder absolute oder relative Positionierung können Sie in sehr spezifische Ziele Ihres Layouts helfen zu erreichen, aber es ist wichtig zu wissen, wie sie zu benutzen. Wie erläutert wurde, ist float im Allgemeinen nebeneinander zu platzieren Blockelemente verwendet, und es ist wirklich gut für Multi-Spalten-Layouts.

Ich will nicht in weitere Informationen gehen Sie hier, aber Sie könnten die folgende prüfen wollen:

sollten Sie verwenden den Schwimmer und klare CSS-Attribute um den gewünschten Effekt zu erhalten.

Zuerst I definierten Stile für die verwendeten genannt links und rechts für die beiden Spalten in meinem Layout und Stil klarer genannt den Seitenfluss zurückgesetzt werden. 

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

Dann benutze ich sie meine Seite Layout. 

<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" />

Sie können verwenden 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>

in CSS-Datei 

.left-menu{float:left;width:200px;}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top