Teilen Sie die Seite zu gleichen Teilen unter einer Navigationsleiste

Ich habe eine Navigationsleiste oben auf meiner Seite, und ich möchte den Rest des Bildschirms auf 4 gleiche Teile teilen, wo ich einige Daten in jedem dieser vier laden werde. Wie kann ich es unter der Navbar teilen?Teilen Sie die Seite zu gleichen Teilen unter einer Navigationsleiste

(hier ist der Code)

<div class="topnav" id="myTopnav" style="font-family: 'Varela Round', sans-serif;"> 
 
    <img src="gym3.png" style="width:50px; height:50px; cursor:pointer;" onclick="callmeplease()"> 
 
    <a href=#><label style="color:#42f44b; border-radius: 25px;" >Welcome,</label> <?php echo $compName ?> |</a> 
 
    <a href="http://localhost/testbench/workfile.php?choice=3" style="border-radius: 25px;">Events |</a> 
 
    <a href="#contact" style="border-radius: 25px;">Customers |</a> 
 
    <a href="#about" style="border-radius: 25px;">Balance |</a> 
 
    <a href="http://localhost/testbench/workfile.php?choice=5" style='float:right; margin-right:10px;' style="border-radius: 25px;">Logout</a> 
 
</div>

Quelle

2017-08-30 petrosg

, was Sie bisher versucht haben? – inarilo

Ich habe noch nicht versucht, ich habe nicht einmal eine Idee, wie Sie die Navbar – petrosg

nicht berücksichtigen können Sie Navbar und Spalten in die gleiche Eltern div – inarilo

Try this:

/*--CSS--*/ 
 

 

 
    div#custom-div { 
 
    position: absolute; 
 
    top: 10%; 
 
    height: 90vh!important; 
 
} 
 
.box { 
 
    float: left; 
 
    width: 100%; 
 
    min-height: 25%; 
 
}

<!--HTML--> 
 

 

 
<html lang="en"> 
 
\t \t <head> 
 
\t \t \t <meta charset="utf-8"> 
 
\t \t \t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t \t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t \t </head> 
 
\t <body> 
 
\t \t <div class="topnav" id="myTopnav" style="font-family: 'Varela Round', sans-serif;"> 
 
\t \t <img src="gym3.png" style="width:50px; height:50px; cursor:pointer;" onclick="callmeplease()"> 
 
\t \t <a href=#><label style="color:#42f44b; border-radius: 25px;" >Welcome,</label> <?php echo $compName ?> |</a> 
 
\t \t <a href="http://localhost/testbench/workfile.php?choice=3" style="border-radius: 25px;">Events |</a> 
 
\t \t <a href="#contact" style="border-radius: 25px;">Customers |</a> 
 
\t \t <a href="#about" style="border-radius: 25px;">Balance |</a> 
 
\t \t <a href="http://localhost/testbench/workfile.php?choice=5" style='float:right; margin-right:10px;' style="border-radius: 25px;">Logout</a> 
 
\t \t </div> 
 
\t \t <div id="custom-div"> 
 
\t \t \t <div class="box"> 
 
\t \t \t \t <h1>My Data</h1> 
 
\t \t \t </div> 
 
\t \t \t <div class="box"> 
 
\t \t \t \t <h1>My Data2</h1> 
 
\t \t \t </div> 
 
\t \t \t <div class="box"> 
 
\t \t \t \t <h1>My Data3</h1> 
 
\t \t \t </div> 
 
\t \t \t <div class="box"> 
 
\t \t \t \t <h1>My Data4</h1> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> \t 
 
\t </html>

Quelle

2017-08-30 11:28:28 Sangrai

vielen Dank mein Freund, das ist, was ich gesucht habe: D – petrosg

Willkommen! Bitte klicken Sie auf Upvote, wenn Sie die Lösung erhalten haben, da dies eine Belohnung für Benutzer in dieser Community ist. – Sangrai

Teilen Sie die Seite zu gleichen Teilen unter einer Navigationsleiste

Antwort

Verwandte Themen