Best Practice zum Aufteilen von Ansichtsfenstern mit CSS flex

-1

In der Hoffnung, dies ist keine Frage, da es in gewisser Weise ein bisschen unspezifisch ist.Best Practice zum Aufteilen von Ansichtsfenstern mit CSS flex

Es ist ganz einfach - ich bin mit dem Ziel ein Design Aufspaltung der Ansichtsfenster/Bildschirm in grobe Hälften (60/40), die vertikal in ähnlicher Weise zu produzieren, wie AirBnB tun: -

AirBnB New York

Ist das nur als So einfach wie die Verwendung von Flexbox-Spalten (ich benutze Bootstrap 4), indem ich die Spaltenbreiten festlege und die rechte Spalte auf Position fixiere?

Jeder Ratschlag, den jemand hat, wäre sehr willkommen, da ich mich nie zuvor mit dieser Art von Design befasst habe und sicherstellen möchte, dass ich nichts übersehen habe.

Quelle

2017-09-11 U4EA

Es wird erwartet, dass Sie zumindest versuchen, diese für sich selbst zu codieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben. –

Hallo. Danke für Ihre Antwort. Ich akzeptiere, dass ich meinen eigenen Code-Versuch nicht hatte, aber das war, weil ich einfach nicht weiß, wie man sich dem Viewport-Splitting annähert. Ich habe Flex erforscht und mein Wissen darüber zur Verfügung gestellt, um ein Szenario zu geben, wie es angegangen werden würde. Ich möchte natürlich nicht, dass andere Leute meinen Code für mich schreiben, da ich kein Liberty Nehmer bin und ich auch nichts vom Kopieren und Einfügen lernen würde. Ich hoffte auf Input, um mich zu einer Lösung zu bringen, die ich selbst programmieren konnte. Aber ich verstehe deine Meinung. – U4EA

Hier ist eine flex Layout-basierte Lösung.

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 

 
.box { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100%; 
 
} 
 

 
.box .row { 
 
    border: 1px dotted grey; 
 
} 
 

 
.box .row.header { 
 
    flex: 0 1 60vh; 
 
} 
 

 
.box .row.content { 
 
    flex: 1 1 40vh; 
 
}

<div class="box"> 
 
    <div class="row header"> 
 
    <p><b>header</b> 
 
     (60%)</p> 
 
    </div> 
 
    <div class="row content"> 
 
    <p> 
 
     <b>content</b> 
 
     (40%) 
 
    </p> 
 
    </div> 
 
</div>

Quelle

2017-09-11 20:58:26 jfeferman

Best Practice zum Aufteilen von Ansichtsfenstern mit CSS flex

Antwort

Verwandte Themen