Warum wird mein Rastercontainer trotz mehrerer Rasterelemente nicht erweitert?

Amandeep Pasricha

Ich versuche zuerst, mein Rasterlayout zu perfektionieren, bevor ich Bild-Tags und SVGs einfüge. Ich habe Medienabfragen hinzugefügt, um das Rasterlayout des Hauptteils und des Hauptelements zu ändern.

Beachten Sie, dass ich Code in den Abschnittselementen auskommentiert habe, weil ich sehen wollte, wie das gesamte Rasterlayout aussieht, bevor ich die Elemente in diesen Rasterelementen bearbeite.

Folgendes versuche ich zu erreichen: https://ibb.co/Hzwd1tN

Hier ist mein HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dashboard</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/normalize.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch@latest/dist/toggle-switch.css" />
    </head>

  <body>

        <header class="header">
            <!-- <h1>YourApp</h1>
            <div class="icon-bell-div">
                <img src="icons/icon-bell.svg">
            </div>
            <div class="profile-name">
                <img src="member-1.jpg">
            </div>
            <p>Josh Sullivan</p> -->
        </header>

        <nav class="side-navigation">
            <!-- <ul class="navigation-items">
                <li><a href="index.html"><img src="icons/icon-dashboard.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-members.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-visits.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-settings.svg"></a></li>
            </ul> -->
        </nav>

        <main>

            <section class="search">
                <h1>Dashboard</h1>
                <input type="search" placeholder="Search"> 
            </section>

            <!-- TRAFFIC-->
            <section class="traffic">
                <!-- <h2>Traffic</h2>
                <nav>
                    <ul>
                        <li>Hourly</li>
                        <li>Daily</li>
                        <li>Weekly</li>
                        <li>Monthly</li>
                    </ul>
                </nav>
                <canvas id="line-chart"></canvas> -->
            </section>

            <!-- DAILY TRAFFIC -->
            <section class="daily-traffic">
                <!-- <h2>Daily Traffic</h2>
                <canvas id="bar-chart"></canvas> -->
            </section> 

            <!-- MOBILE USERS -->
            <section class="mobile-users">
                <!-- <h2>Mobile Users</h2>
                <canvas id="doughnut-chart"></canvas> -->
            </section>

            <!-- SOCIAL STATS-->
            <section class="social-stats">
                <h2>Social Stats</h2>

                <!-- <div class="twitter">  
                    <svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
                        <path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
                        c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
                        c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
                        c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
                        c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
                    </svg>
                </div>

                <div class="facebook">
                    <svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029  c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77  L40.43,21.739z"/>
                    </svg>
                </div>

                <div class="google">
                    <svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
                        <path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
                        c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
                        c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
                        c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
                        c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
                        c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
                        c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
                        c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
                        c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
                        c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
                        c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
                        c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
                        c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
                        c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
                        c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
                        h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
                    </svg>
                </div> -->

            </section>

            <!-- NEW MEMBERS -->
            <section class="new-members">
                <!-- <div class="member">
                    <img src="images/member-1.jpg">
                </div>

                <div class="member">
                    <img src="images/member-2.jpg">
                </div>

                <div class="member">
                    <img src="images/member-3.jpg">
                </div>

                <div class="member">
                    <img src="images/member-4.jpg">
                </div> -->

            </section>


            <!--RECENT ACTIVITY-->
            <section class="recent-activity">

                <!-- <div class="member">
                    <img src="images/member-1.jpg">
                </div>

                <div class="member">
                    <img src="images/member-2.jpg">
                </div>

                <div class="member">
                    <img src="images/member-3.jpg">
                </div>

                <div class="member">
                    <img src="images/member-4.jpg">
                </div> -->

            </section>

            <!-- MESSAGE USERS -->
            <section class="message-users">
                <!-- <input type="search" id="site-search" placeholder="Search for User">
                <textarea rows="10" cols="50" placeholder="Message for User"></textarea>
                <input type="submit" id="site-search" value="Send"> -->
            </section>

            <!-- SETTINGS -->
            <section class="settings">

                <!-- <label class="switch-light switch-ios" onclick="">
                <input type="checkbox">
                <strong class="switch-light-text">
                    Send Email Notifications
                </strong>
                <span class="switch-light-span">
                    <span>Off</span>
                    <span>On</span>
                    <a></a>
                </span>
                </label>

                <label class="switch-light switch-ios" onclick="">
                <input type="checkbox">
                <strong class="switch-light-text">
                    Set Profile to Public
                </strong>
                <span class="switch-light-span">
                    <span>Off</span>
                    <span>On</span>
                    <a></a>
                </span>
                </label>

                <select name="timezone">
                    <option value="volvo" selected>Select a Timezone</option>
                    <option value="volvo">Volvo</option>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                </select>

                <div class="buttons">
                    <button>Save</button>
                    <button>Cancel</button>
                </div> -->

            </section>

        </main>

    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> 
    <script src="app.js"></script>
</html>

Hier ist mein CSS:

* {
    box-sizing: border-box;
}
/*MOBILE */
header {
    grid-area: header;
}
.side-navigation {
    grid-area: navigation;
}
main {
    grid-area: main;
}
/*NON-MOBILE */
.search {
    grid-area: search;
}
.traffic {
    grid-area: traffic;
}
.daily-traffic {
    grid-area: daily-traffic;
}
.mobile-users {
    grid-area: mobile-users;
}
.social-stats {
    grid-area: social-stats;
}
.new-members {
    grid-area: new-members;
}
.recent-activity {
    grid-area: recent-activity;
}
.message-users {
    grid-area: message-users;
}
.settings {
    grid-area: settings;
}

/*BODY GRID*/
body {
    display: grid;
    grid-template-rows: 80px 80px 1fr;
    grid-template-areas:
    "header"
    "navigation"
    "main";
}

header {
    background-color: #7279C2;
}
.side-navigation {
    background-color: #4D4A77;
}
main {
    background-color: white;
}

@media (min-width: 768px) {
    body {
        grid-template-rows: 80px 1fr;
        grid-template-columns: 80px 1fr;
        grid-template-areas: 
        "header header"
        "navigation main"
    }
    main {
        border: 2px blue solid;
    }

    main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 6fr 5fr 3fr 1fr 1fr;
        grid-template-areas: 
        "search search"
        "traffic traffic"
        "daily-traffic mobile-users"
        "social-stats social-stats"
        "new members recent-activity"
        "message-users settings";
    } 
}

Wenn meine Medienabfrage funktioniert, warum wird mein Hauptgittercontainer nicht ordnungsgemäß erweitert, wenn mehrere Rasterelemente darin enthalten sind.

Hier können Sie sehen, wie das Dashboard und die Überschrift des sozialen Status auf diese Weise zusammenklumpen. Warum ist das passiert?

außen

Weil Ihre grid-template-rowsDefinition nicht in Ihrer grid-template-areasDefinition berücksichtigt wird (Sie müssen die gleiche Anzahl von Einheiten angeben!) Und Sie keine grid-template-rowsEigenschaft definieren .

* {
    box-sizing: border-box;
}
/*MOBILE */
header {
    grid-area: header;
}
.side-navigation {
    grid-area: navigation;
}
main {
    grid-area: main;
}
/*NON-MOBILE */
.search {
    grid-area: search;
}
.traffic {
    grid-area: traffic;
}
.daily-traffic {
    grid-area: daily-traffic;
}
.mobile-users {
    grid-area: mobile-users;
}
.social-stats {
    grid-area: social-stats;
}
.new-members {
    grid-area: new-members;
}
.recent-activity {
    grid-area: recent-activity;
}
.message-users {
    grid-area: message-users;
}
.settings {
    grid-area: settings;
}

/*BODY GRID*/
body {
    display: grid;
    grid-template-rows: 80px 1fr;
    grid-template-columns: 80px 1fr;
    grid-template-areas:
    "header header"
    "navigation main";
    height: 100vh;
}

header {
    background-color: #7279C2;
}
.side-navigation {
    background-color: #4D4A77;
}
main {
    background-color: white;
}

        <header class="header">
            <!-- <h1>YourApp</h1>
            <div class="icon-bell-div">
                <img src="icons/icon-bell.svg">
            </div>
            <div class="profile-name">
                <img src="member-1.jpg">
            </div>
            <p>Josh Sullivan</p> -->
        </header>

        <nav class="side-navigation">
            <!-- <ul class="navigation-items">
                <li><a href="index.html"><img src="icons/icon-dashboard.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-members.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-visits.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-settings.svg"></a></li>
            </ul> -->
        </nav>

        <main>

            <section class="search">
                <h1>Dashboard</h1>
                <input type="search" placeholder="Search"> 
            </section>

            <!-- TRAFFIC-->
            <section class="traffic">
                <!-- <h2>Traffic</h2>
                <nav>
                    <ul>
                        <li>Hourly</li>
                        <li>Daily</li>
                        <li>Weekly</li>
                        <li>Monthly</li>
                    </ul>
                </nav>
                <canvas id="line-chart"></canvas> -->
            </section>

            <!-- DAILY TRAFFIC -->
            <section class="daily-traffic">
                <!-- <h2>Daily Traffic</h2>
                <canvas id="bar-chart"></canvas> -->
            </section> 

            <!-- MOBILE USERS -->
            <section class="mobile-users">
                <!-- <h2>Mobile Users</h2>
                <canvas id="doughnut-chart"></canvas> -->
            </section>

            <!-- SOCIAL STATS-->
            <section class="social-stats">
                <h2>Social Stats</h2>

                <!-- <div class="twitter">  
                    <svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
                        <path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
                        c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
                        c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
                        c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
                        c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
                    </svg>
                </div>

                <div class="facebook">
                    <svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029  c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77  L40.43,21.739z"/>
                    </svg>
                </div>

                <div class="google">
                    <svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
                        <path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
                        c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
                        c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
                        c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
                        c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
                        c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
                        c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
                        c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
                        c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
                        c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
                        c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
                        c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
                        c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
                        c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
                        c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
                        h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
                    </svg>
                </div> -->

            </section>

            <!-- NEW MEMBERS -->
            <section class="new-members">
                <!-- <div class="member">
                    <img src="images/member-1.jpg">
                </div>

                <div class="member">
                    <img src="images/member-2.jpg">
                </div>

                <div class="member">
                    <img src="images/member-3.jpg">
                </div>

                <div class="member">
                    <img src="images/member-4.jpg">
                </div> -->

            </section>


            <!--RECENT ACTIVITY-->
            <section class="recent-activity">

                <!-- <div class="member">
                    <img src="images/member-1.jpg">
                </div>

                <div class="member">
                    <img src="images/member-2.jpg">
                </div>

                <div class="member">
                    <img src="images/member-3.jpg">
                </div>

                <div class="member">
                    <img src="images/member-4.jpg">
                </div> -->

            </section>

            <!-- MESSAGE USERS -->
            <section class="message-users">
                <!-- <input type="search" id="site-search" placeholder="Search for User">
                <textarea rows="10" cols="50" placeholder="Message for User"></textarea>
                <input type="submit" id="site-search" value="Send"> -->
            </section>

            <!-- SETTINGS -->
            <section class="settings">

                <!-- <label class="switch-light switch-ios" onclick="">
                <input type="checkbox">
                <strong class="switch-light-text">
                    Send Email Notifications
                </strong>
                <span class="switch-light-span">
                    <span>Off</span>
                    <span>On</span>
                    <a></a>
                </span>
                </label>

                <label class="switch-light switch-ios" onclick="">
                <input type="checkbox">
                <strong class="switch-light-text">
                    Set Profile to Public
                </strong>
                <span class="switch-light-span">
                    <span>Off</span>
                    <span>On</span>
                    <a></a>
                </span>
                </label>

                <select name="timezone">
                    <option value="volvo" selected>Select a Timezone</option>
                    <option value="volvo">Volvo</option>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                </select>

                <div class="buttons">
                    <button>Save</button>
                    <button>Cancel</button>
                </div> -->

            </section>

        </main>

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am2021-01-16

Lass mich ein paar Worte sagen

0Kommentare

LoginNach der Teilnahme an der Überprüfung

Vorheriger Beitrag:Unterscheiden Sie Werte aus dem Array basierend auf einem Teil der Zeichenfolge in JS

TOP Liste

Artikel

Warum wird mein Rastercontainer trotz mehrerer Rasterelemente nicht erweitert?

Warum wird mein Rastercontainer trotz mehrerer Rasterelemente nicht erweitert?

So legen Sie mit dem Interface Builder unterschiedliche führende Speicherplätze für unterschiedliche Geräte fest

Fügen Sie eine weitere Schaltfläche zu gwt Suggest Box hinzu

Wie konvertiere ich einen Vektor von Bytes (u8) in eine Zeichenfolge?

Wie kann ich in SCSS mehrere Klassen zu einer einzigen kombinieren?

Wie konvertiert man einen Datenrahmen im langen Format in eine Liste mit einem geeigneten Format?

Speichern Sie ein MPAndroidChart-Diagramm in einem Bild, ohne es in einer Aktivität anzuzeigen

Gruppieren Sie Datenrahmenspalten nach ihrem Datum (die Spaltentitel enthalten) und fassen Sie die Instanzen von Einsen und Nullen in R . zusammen

Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um

Eclipse Oxygen - Projekte verschwinden

Wie wählt man Unterschiede mit drei Tabellen aus?

Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

ElasticSearch BulkShardRequest ist aufgrund von org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor fehlgeschlagen

Wie kann ich den Kaskadenmodus global einstellen?

Python: Spalten mit demselben Namen zusammenführen, wobei der Mindestwert beibehalten wird

So erhalten Sie eine gleichmäßige Höhe für alle Eingabefelder

Wie erstelle ich einen neuen übergeordneten Knoten außerhalb der .ref (/ path) in der Firebase-Echtzeitdatenbank mithilfe von Cloud-Funktionen (Typescript)?

Was ist schneller: SUM über NULL oder über 0?

Wie kann ich eine verschachtelte Schleife mit lapply in R ersetzen?

Kann ich ein Tkinter-Canvas erstellen, das mehrere Zeilen in einem Text-Widget umfasst?

Ärgerliches Problem mit yaml, das ich nicht lösen kann