Wie kann ich die Oberseiten dieser divs korrekt ausrichten?

Ich versuche eine Webseite zu erstellen, die zwei Divs enthält. Die erste Gruppe von Divs sollte in Position fixiert und auf der linken Seite der Seite ausgerichtet sein. Die zweite Gruppe von divs enthält den Hauptinhalt der Webseite und sollte scrollbar sein.Wie kann ich die Oberseiten dieser divs korrekt ausrichten?

Um dies zu tun, erstellt Ive den folgenden Code:

<!DOCTYPE html> 
<html> 

<body style="height: 1500px"> 

<div style="position: fixed; display: inline;"> 

    <div style="border-style: solid; width: 250px; margin: 15px; padding: 15px;"><h2>Add Media</h2></div> 

    <div style="border-style: solid; width: 250px; margin: 15px; padding: 15px;"><h2>Add Media</h2></div> 

    <div style="border-style: solid; width: 250px; margin: 15px; padding: 15px;"><h2>Add Media</h2></div> 

</div> 


<div style="margin-left: 350px"> 

    <div style="border-style: solid; margin: 20px; padding: 20px;"> 
     <h1>POST</h1> 
    </div> 

    <div style="border-style: solid; margin: 20px; padding: 20px;"> 
     <h1>POST</h1> 
    </div> 

    <div style="border-style: solid; margin: 20px; padding: 20px;"> 
     <h1>POST</h1> 
    </div> 

    <div style="border-style: solid; margin: 20px; padding: 20px;"> 
     <h1>POST</h1> 
    </div> 

    <div style="border-style: solid; margin: 20px; padding: 20px;"> 
     <h1>POST</h1> 
    </div> 

    <div style="border-style: solid; margin: 20px; padding: 20px;"> 
     <h1>POST</h1> 
    </div> 

    <div style="border-style: solid; margin: 20px; padding: 20px;"> 
     <h1>POST</h1> 
    </div> 

    <div style="border-style: solid; margin: 20px; padding: 20px;"> 
     <h1>POST</h1> 
    </div> 

    <div style="border-style: solid; margin: 20px; padding: 20px;"> 
     <h1>POST</h1> 
    </div> 

</div> 

</body> 

</html>

Dieser Code führt, wie ich es hoffen würde, mit Ausnahme der Spitze des ersten div von jedem Abschnitt auszurichten nicht. Wie kann ich das beheben?

Auch, ist meine Methode zum Erstellen einer Webseite dieses Stils korrekt?

Quelle

2016-05-31 John Smith

Machen Sie sich einen Gefallen und verschieben Sie das CSS in ein Stylesheet. – Oriol

'Ist meine Methode zum Erstellen einer Webseite dieses Typs korrekt?' Nein. Sie sollten 'classes' verwenden, damit die Stile skalierbar sind. Die Art, wie es jetzt gemacht wird, ist fast statisch. –

Danke für die Antworten. Wo kann ich über Klassen lernen? –

Versuchen Sie, diese für Ihren Code:

HTML -

<body> 
<div class="addMedia"> 
    <div class="addMediaDivs"> 
    <h2>Add Media</h2> 
    </div> 
    <div class="addMediaDivs"> 
    <h2>Add Media</h2> 
    </div> 
    <div class="addMediaDivs"> 
    <h2>Add Media</h2> 
    </div> 
</div> 

<div class="postBlocks"> 
    <div class="postDivs"> 
    <h1>POST</h1> 
    </div> 
    <div class="postDivs"> 
    <h1>POST</h1> 
    </div> 
    <div class="postDivs"> 
    <h1>POST</h1> 
    </div> 
    <div class="postDivs"> 
    <h1>POST</h1> 
    </div> 
    <div class="postDivs"> 
    <h1>POST</h1> 
    </div> 
    <div class="postDivs"> 
    <h1>POST</h1> 
    </div> 
    <div class="postDivs"> 
    <h1>POST</h1> 
    </div> 
    <div class="postDivs"> 
    <h1>POST</h1> 
    </div> 
    <div class="postDivs"> 
    <h1>POST</h1> 
    </div> 
</div> 
</body>

CSS -

body{ 
    height: 1500px; 
} 

.addMedia{ 
    position: fixed; 
    display: inline; 
    vertical-align: top; 
} 

.addMediaDivs{ 
    border-style: solid; 
    width: 250px; 
    margin-bottom: 20px; 
    padding: 20px; 
    height: 100px; 
} 

.postBlocks{ 
    margin-left: 350px; 
} 

.postDivs{ 
    border-style: solid; 
    margin-bottom: 20px; 
    padding: 20px; 
    vertical-align: top; 
    height: 100px; 
}

Wesentlichen, was Sie getan haben, ist nicht die beste Industriestandard Code stylen . Vielleicht möchten Sie Ihre CSS in einer separaten. CSS-Datei zu halten, und verwenden Sie einfach Klassen/IDs in Ihrem HTML. Sie haben beiden Divs unterschiedliche Abstände/Ränder zugewiesen. Daher waren die Spitzen nicht ausgerichtet.

Sie können hier mehr über effektive CSS-Stylingtechniken lesen -, https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/, http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/.

Wenn Sie sehen wollen, wie bei Styling über ein Beispiel, besser zu werden, überprüfen Sie den Code hier, die ich nach Ihren Bedürfnissen neu formatiert - http://plnkr.co/edit/IGAF8HZAIegJeMU1inzd?p=preview

Hoffe, es hilft!

Quelle

2016-05-31 18:28:35 Mona

Danke. Ich schätze deine Hilfe sehr –

Wie kann ich die Oberseiten dieser divs korrekt ausrichten?

Antwort

Verwandte Themen