Machen Sie eine Sidebar mit CSS

Question

Wie kann ich eine Seitenleiste mit dieser HTML-Element Bestellung und reinen CSS wie angehängtes Bild machen?

html:

<div id="main"> 
     <div id="One"></div> 
     <div id="Two"></div> 
     <div id="Three"></div> 
    </div> 

gewünschte Ansicht:

Aber es ist so:

ich etwas von float & clear & display Eigenschaft aber nicht funktioniert. #One, #Two und #Three hat ein Elternteil (sie sind Geschwister) und ich möchte nicht absolute oder feste Position verwenden.

Answer 1

Ich würde so etwas wie dies mit denen Sie Ihre Standard-CSS-Datei sehr empfehlen:

* { 
    box-sizing: border-box; 
} 

*:before, 
*:after { 
    box-sizing: border-box; 
} 

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
} 

.row:before, 
.row:after, 
.clearfix:before, 
.clearfix:after, 
.container:before, 
.container:after, 
.container-fluid:before, 
.container-fluid:after { 
    content: " "; 
    display: table; 
} 

.row:after, 
.clearfix:after, 
.container:after, 
.container-fluid:after { 
    clear: both; 
} 

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

@media (min-width: 768px) { 
    .container { 
    width: 750px; 
    } 
} 

@media (min-width: 992px) { 
    .container { 
    width: 970px; 
    } 
} 

@media (min-width: 1200px) { 
    .container { 
    width: 1170px; 
    } 
} 

.container-fluid { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

[class*="col-"] { 
    position: relative; 
    float: left; 
    min-height: 1px; 
    width: 100%; 
} 

.col-xs-12 {width: 100%;} 
.col-xs-11 {width: 91.66666667%;} 
.col-xs-10 {width: 83.33333333%;} 
.col-xs-9 {width: 75%;} 
.col-xs-8 {width: 66.66666667%;} 
.col-xs-7 {width: 58.33333333%;} 
.col-xs-6 {width: 50%;} 
.col-xs-5 {width: 41.66666667%;} 
.col-xs-4 {width: 33.33333333%;} 
.col-xs-3 {width: 25%;} 
.col-xs-2 {width: 16.66666667%;} 
.col-xs-1 {width: 8.33333333%;} 
.col-xs-offset-12 {margin-left: 100%;} 
.col-xs-offset-11 {margin-left: 91.66666667%;} 
.col-xs-offset-10 {margin-left: 83.33333333%;} 
.col-xs-offset-9 {margin-left: 75%;} 
.col-xs-offset-8 {margin-left: 66.66666667%;} 
.col-xs-offset-7 {margin-left: 58.33333333%;} 
.col-xs-offset-6 {margin-left: 50%;} 
.col-xs-offset-5 {margin-left: 41.66666667%;} 
.col-xs-offset-4 {margin-left: 33.33333333%;} 
.col-xs-offset-3 {margin-left: 25%;} 
.col-xs-offset-2 {margin-left: 16.66666667%;} 
.col-xs-offset-1 {margin-left: 8.33333333%;} 

@media only screen and (min-width: 768px) { 
    .col-sm-12 {width: 100%;} 
    .col-sm-11 {width: 91.66666667%;} 
    .col-sm-10 {width: 83.33333333%;} 
    .col-sm-9 {width: 75%;} 
    .col-sm-8 {width: 66.66666667%;} 
    .col-sm-7 {width: 58.33333333%;} 
    .col-sm-6 {width: 50%;} 
    .col-sm-5 {width: 41.66666667%;} 
    .col-sm-4 {width: 33.33333333%;} 
    .col-sm-3 {width: 25%;} 
    .col-sm-2 {width: 16.66666667%;} 
    .col-sm-1 {width: 8.33333333%;} 
    .col-sm-offset-12 {margin-left: 100%;} 
    .col-sm-offset-11 {margin-left: 91.66666667%;} 
    .col-sm-offset-10 {margin-left: 83.33333333%;} 
    .col-sm-offset-9 {margin-left: 75%;} 
    .col-sm-offset-8 {margin-left: 66.66666667%;} 
    .col-sm-offset-7 {margin-left: 58.33333333%;} 
    .col-sm-offset-6 {margin-left: 50%;} 
    .col-sm-offset-5 {margin-left: 41.66666667%;} 
    .col-sm-offset-4 {margin-left: 33.33333333%;} 
    .col-sm-offset-3 {margin-left: 25%;} 
    .col-sm-offset-2 {margin-left: 16.66666667%;} 
    .col-sm-offset-1 {margin-left: 8.33333333%;} 
} 

@media only screen and (min-width: 992px) { 
    .col-md-12 {width: 100%;} 
    .col-md-11 {width: 91.66666667%;} 
    .col-md-10 {width: 83.33333333%;} 
    .col-md-9 {width: 75%;} 
    .col-md-8 {width: 66.66666667%;} 
    .col-md-7 {width: 58.33333333%;} 
    .col-md-6 {width: 50%;} 
    .col-md-5 {width: 41.66666667%;} 
    .col-md-4 {width: 33.33333333%;} 
    .col-md-3 {width: 25%;} 
    .col-md-2 {width: 16.66666667%;} 
    .col-md-1 {width: 8.33333333%;} 
    .col-md-offset-12 {margin-left: 100%;} 
    .col-md-offset-11 {margin-left: 91.66666667%;} 
    .col-md-offset-10 {margin-left: 83.33333333%;} 
    .col-md-offset-9 {margin-left: 75%;} 
    .col-md-offset-8 {margin-left: 66.66666667%;} 
    .col-md-offset-7 {margin-left: 58.33333333%;} 
    .col-md-offset-6 {margin-left: 50%;} 
    .col-md-offset-5 {margin-left: 41.66666667%;} 
    .col-md-offset-4 {margin-left: 33.33333333%;} 
    .col-md-offset-3 {margin-left: 25%;} 
    .col-md-offset-2 {margin-left: 16.66666667%;} 
    .col-md-offset-1 {margin-left: 8.33333333%;} 
} 

@media (min-width: 1200px) { 
    .col-lg-12 {width: 100%;} 
    .col-lg-11 {width: 91.66666667%;} 
    .col-lg-10 {width: 83.33333333%;} 
    .col-lg-9 {width: 75%;} 
    .col-lg-8 {width: 66.66666667%;} 
    .col-lg-7 {width: 58.33333333%;} 
    .col-lg-6 {width: 50%;} 
    .col-lg-5 {width: 41.66666667%;} 
    .col-lg-4 {width: 33.33333333%;} 
    .col-lg-3 {width: 25%;} 
    .col-lg-2 {width: 16.66666667%;} 
    .col-lg-1 {width: 8.33333333%;} 
    .col-lg-offset-12 {margin-left: 100%;} 
    .col-lg-offset-11 {margin-left: 91.66666667%;} 
    .col-lg-offset-10 {margin-left: 83.33333333%;} 
    .col-lg-offset-9 {margin-left: 75%;} 
    .col-lg-offset-8 {margin-left: 66.66666667%;} 
    .col-lg-offset-7 {margin-left: 58.33333333%;} 
    .col-lg-offset-6 {margin-left: 50%;} 
    .col-lg-offset-5 {margin-left: 41.66666667%;} 
    .col-lg-offset-4 {margin-left: 33.33333333%;} 
    .col-lg-offset-3 {margin-left: 25%;} 
    .col-lg-offset-2 {margin-left: 16.66666667%;} 
    .col-lg-offset-1 {margin-left: 8.33333333%;} 
} 

Das es so einrichtet Sie ein grundlegendes 12-Säulen-Grid-System verwenden können, die auf Mediengrößen reagieren können. So macht es Bootstrap. Auf diese Weise wenden Sie einfach ein paar Klassen auf Ihr HTML an, um das gewünschte Layout zu erreichen. Etwas wie folgt aus:

<div class="row"> 
    <div class="col-xs-4" id="three"></div> 
    <div class="col-xs-8" id="two"></div> 
    <div class="col-xs-8" id="one"></div> 
</div> 

Dann können Sie nur ein paar id spezifische Arten hinzufügen:

#one, #two, #three { 
    background-color: #000; 
    color: #fff; 
    border: 1px solid #fff; 
} 

#one, #two { 
    height: 50vh; 
} 

#three { 
    height: 100vh; 
} 

Here ist ein jsfiddle zeigen, was ich rede.

Wieder müssen Sie diese Methode nicht genau anwenden, aber ich finde es sehr nützlich, ein CSS-Grid-System wie dieses zu verwenden. Wenn Sie CSS-Grids googeln, finden Sie eine Reihe anderer Möglichkeiten.

EDIT:

Okay, wenn Sie die div um die Ordnung aufrechtzuerhalten, dann können Sie dies tun.

html:

<div id="main"> 
    <div id="One"> 
    One 
    </div> 
    <div id="Two"> 
    Two 
    </div> 
    <div id="Three"> 
    Three 
    </div> 
</div> 

css:

* { 
    box-sizing: border-box; 
} 

#main:before, 
#main:after { 
    content:''; 
    display: table; 
} 

#main:after { 
    clear:both; 
} 

#One, #Two, #Three { 
    background-color: #000; 
    color: #fff; 
    border: 1px solid #fff; 
} 

#Three { 
    height: 100vh; 
    width: 20% 
} 

#One, #Two { 
    height: 50vh; 
    width: 80%; 
    float: right; 
} 

Die fiddle.

Und natürlich können Sie mit der Höhe, den Rändern usw. von #One und #Two spielen, um zu der Ästhetik zu gelangen, die Sie wollen.

Answer 2

-Code für die Seitenleiste #three und #ONE

<div class="wrapper"> 
    <div class="content"> 
     <div class="left-sidebar"> 
      <ul class="sidebar-menu"> 
       #THREE     
      </ul> 
     </div> 
     <div class="right-main-content"> 
      #ONE 
    </div> 
</div> 

.wrapper {width:100%;height:100%;} 
.content{padding-top:20px;} 
.left-sidebar {width:120px;height:200px;margin:0 0 0 0;border:1px solid red;float:left;} 
.right-main-content{margin:0 60px 0 140px;border: 1px solid green;} 
.right-other-content{margin:0 60px 0 140px;border: 1px solid green; padding-top:20px;} 
.sidebar-menu{list-style-type:none;} 
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;} 

Answer 3

Hier gehen Sie HTML:

<div id="main"> 
    <div id="one" class="right-side"> 
    <p> 
    one 
    </p> 
    </div> 
    <div id="two" class="right-side"> 
    <p> 
    Two 
    </p> 
    </div> 
    </div> 
    <div id="three"> 
    <p> 
    Three 
    </p> 
    </div> 

CSS:

p{ 
    color:#fff; 
    text-align:center; 
padding-top:30px; 
font-size:30px; 
margin:0; 
} 
.right-side{ 
    margin-left:200px; 
} 
#one{ 
    height:48vh; 
    background-color:#222; 
    margin-bottom:10px; 
} 
#two{ 
    height:40vh; 
    background-color:#222; 
} 
#three{ 
    width:200px; 
    position:fixed; 
    background-color:#222; 
    height:100vh; 
    left:0; 
    top:0; 
} 

DEMO: https://jsfiddle.net/Lt8ovoqw/2/