Wie man div unter einem anderen div macht

Wie kann ich DIV "sideBottom" unter "SideTop" gehen lassen und "Konsole" unter "Main" gehen?Wie man div unter einem anderen div macht

Dies ist, wie es im Moment aussieht:

Current page layout

HTML/CSS:

*{ 
 
    padding : 0; 
 
    margin : 0; 
 
    border : 0; 
 
} 
 
body{ 
 
    background-image : url(' bi-background-cubes.png '); 
 
    background-attachment : fixed; 
 
    background-size : 100% auto; 
 
} 
 
.blended_grid{ 
 
    display : block; 
 
    width : 1370px; 
 
    overflow : auto; 
 
    margin : 50px auto 0 auto; 
 
} 
 
.pageHeader{ 
 
    background-color : rgba(6,67,0,0.4); 
 
    float : left; 
 
    clear : none; 
 
    height : 70px; 
 
    width : 1370px; 
 
} 
 
.sideTop{ 
 
    background-color : rgba(0,2,227,0.4); 
 
    float : left; 
 
    clear : none; 
 
    height : 430px; 
 
    width : 260px; 
 
} 
 
.main{ 
 
    background-color : rgba(171,0,161,0.4); 
 
    float : left; 
 
    clear : none; 
 
    height : 600px; 
 
    width : 680px; 
 
} 
 
.tableInput{ 
 
    background-color : rgba(156,141,0,0.4); 
 
    float : left; 
 
    clear : none; 
 
    height : 350px; 
 
    width : 400px; 
 
} 
 
.tableOutput{ 
 
    clear : none; 
 
    float : left; 
 
    position : relative; 
 
    width : 400px; 
 
    height : 350px; 
 
    background-color : rgba(0,115,97,0.4); 
 
} 
 
.sideBottom{ 
 
    clear : none; 
 
    float : left; 
 
    position : relative; 
 
    width : 260px; 
 
    height : 270px; 
 
    background-color : rgba(255,0,10,0.4); 
 
} 
 
.console{ 
 
    background-color : lightgreen; 
 
    float : left; 
 
    clear : none; 
 
    height : 100px; 
 
    width : 680px; 
 
}

<div class="blended_grid"> 
 
    <div class="pageHeader">` 
 
    <h1> pageHeader</h1> 
 
    </div> 
 
    <div class="sideTop"> 
 
    <h1> SideTop </h1> 
 
    </div> 
 
    
 
    <div class="main"> 
 
    <h1> Main </h1> 
 
    </div> 
 
    <div class="tableInput"> 
 
    <h1>tableInput</h1> 
 
    </div> 
 
    
 
    <div class="tableOutput"> 
 
    <h1> tableOutput</h1> 
 
    </div> 
 
    <div class="sideBottom"> 
 
    <h1> SideBottom</h1> 
 
    </div> 
 
    <div class="console"> 
 
    <h1> Console</h1> 
 
    </div> 
 
</div>

Quelle

2017-06-05 Ng21

Können Sie das HTML ändern? Ich würde drei HTML-Wrapper hinzufügen, einen um jede Spalte, und Ihr CSS entsprechend aktualisieren. – Blazemonger

Bitte erläutern Sie, was Sie unter "Untergehen" verstehen. Beziehen Sie sich auf die Stapelreihenfolge des Z-Index oder auf die tatsächliche Div-Reihenfolge auf der Seite. – Korgrue

Ja die HTML sollte auf jeden Fall aktualisiert werden, um dies zu erleichtern – Huangism

Sie sich von den Schwimmern loszuwerden, fügen Sie einige Verpackung divs, und benutze flex:

Ich nehme an, das ist, was Sie wollen: https://jsfiddle.net/znvuepLq/

Hier ist eine gute Ressource für flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

HTML/CSS:

*{ 
 
    padding : 0; 
 
    margin : 0; 
 
    border : 0; 
 
} 
 
body{ 
 
    background-image : url(' bi-background-cubes.png '); 
 
    background-attachment : fixed; 
 
    background-size : 100% auto; 
 
} 
 
.blended_grid{ 
 
    width : 1370px; 
 
    overflow : auto; 
 
    margin : 50px auto 0 auto; 
 
} 
 
.content{ 
 
    display: flex; 
 
} 
 
.pageHeader{ 
 
    background-color : rgba(6,67,0,0.4); 
 
    height : 70px; 
 
    width : 1370px; 
 
} 
 
.sideTop{ 
 
    background-color : rgba(0,2,227,0.4); 
 
    height : 430px; 
 
    width : 260px; 
 
} 
 
.main{ 
 
    background-color : rgba(171,0,161,0.4); 
 
    height : 600px; 
 
    width : 680px; 
 
} 
 
.tableInput{ 
 
    background-color : rgba(156,141,0,0.4); 
 
    height : 350px; 
 
    width : 400px; 
 
} 
 
.tableOutput{ 
 
    width : 400px; 
 
    height : 350px; 
 
    background-color : rgba(0,115,97,0.4); 
 
} 
 
.sideBottom{ 
 
    width : 260px; 
 
    height : 270px; 
 
    background-color : rgba(255,0,10,0.4); 
 
} 
 
.console{ 
 
    background-color : lightgreen; 
 
    height : 100px; 
 
    width : 680px; 
 
}

<div class="blended_grid"> 
 
    <div class="pageHeader">` 
 
    <h1> pageHeader</h1> 
 
    </div> 
 
    <div class="content"> 
 
    <div> 
 
     <div class="sideTop"> 
 
     <h1> SideTop </h1> 
 
     </div> 
 
     <div class="sideBottom"> 
 
     <h1> SideBottom</h1> 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <div class="main"> 
 
     <h1> Main </h1> 
 
     </div> 
 
     <div class="console"> 
 
     <h1> Console</h1> 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <div class="tableInput"> 
 
     <h1>tableInput</h1> 
 
     </div> 
 
     <div class="tableOutput"> 
 
     <h1> tableOutput</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-06-05 16:46:42 user7363719

Vielen Dank !! das ist genau das, was ich wollte! Einfach genial .... du bist ein Star *. – Ng21

versuchen z-Index. bestimmt, was div/object zuerst gerendert wird. :)

Quelle

2017-06-05 17:06:15

Gute Idee, aber Sie sollten ein Beispiel für den Fall einbringen, dass er ein visueller Lerner ist. Ein Link zu MDNs Artikel zur Z-Indizierung wäre ebenfalls hilfreich. – ashbygeek

Danke, es war großartig, über den Z-Index zu wissen. – Ng21

Wie man div unter einem anderen div macht

Antwort

Verwandte Themen