Question

我希望我的网站看起来像这样

我相信如果我想让导航栏按钮长度相同，我必须使用Flexbox。 我应该尝试使用Flexbox制作整个网站，还是只使用导航栏？

我可以创建一个类似于codepen sample的网站，列/行中包含列/行，但我不知道如何将标题居中（忽略其他文本区域）。 Flexbox容器可以获得绝对位置，并忽略其他Flexbox容器吗？

谢谢，DMM

P.S。如果我说了些什么＆＃39;错误＆＃39;或者不清楚，请发表评论，我会尽力清理它。

编辑：这是我当前网站上的html（可在matt.matt.cat上查看（需要更多代表发布超过2个链接：P））

<!DOCTYPE html>
<html>
    <title>Just another website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <style>
    body,h1 {text-align:center; font-family: "Raleway", sans-serif}
    body, html {height: 100%}
    .bgimg {
        background-image: url("http://www.w3schools.com/w3images/forestbridge.jpg");
        /* leave 5% room for navbar */
        min-height: 95%;
        background-position: center;
        background-size: cover;
    }
    .navbar-column {
        text-align: center;
        float: left;
        width: 20%;
    }
    #navbar {
        height: 5%;
        background: #053a2b;
    }
    .navbar_link {
        text-decoration: none;
        background-color: transparent!important;
    }
    </style>
    <body>
        <!-- Dark olive green navbar at the top of the page, has links to other pages, can only be seen if auth -->
        <div id="navbar" class="w3-animate-opacity w3-text-white">
            <p id="navbar_left" class="navbar-column">
                <a href="http://www.google.com" class="navbar_link">Navbar 1</a>
            </p>
            <p id="navbar_center_left" class="navbar-column w3-border-left">
                <a href="http://www.google.com" class="navbar_link">Navbar 2</a>
            </p>
            <p id="navbar_center" class="navbar-column w3-border-left">
                <a href="http://www.google.com" class="navbar_link">Navbar 3</a>
            </p>
            <p id="navbar_center_right" class="navbar-column w3-border-left">
                <a href="http://www.google.com" class="navbar_link">Navbar 4</a>
            </P>
            <p id="navbar_right" class="navbar-column w3-border-left">
                <a href="http://www.google.com" class="navbar_link">Navbar 5</a>
                 / 
                <a href="http://www.bing.com" class="navbar_link">Navbar 6</a>
            </p>
        </div>

        <div class="bgimg w3-animate-opacity w3-text-white">            
            <div class="w3-display-middle w3-display-container w3-xxxlarge">
                <!-- Main title -->
                <h1 class="w3-animate-top">
                    (PROBABLY&nbsp;NOT) COMING&nbsp;SOON
                </h1>
                <hr class="w3-border-grey" style="margin:auto; width:40%">
                <!-- Subheading -->
                <p id="subheading" style="margin:auto; width: auto%;">
                    subheading
                </p>
            </div>

                <!-- Top right caption -->
                <p class="w3-display-topright w3-padding-large w3-large" style="top: 20px;">
                    Top right caption
                </p>

                <!-- Bottom right year -->
                <p class="w3-display-bottomright w3-padding-small w3-medium">
                    2017
                </p>
        </div>
    </body>
</html>

这是我使用Flexbox转换的HTML：

<!DOCTYPE html>
<html>
    <title>Just another website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">

    <style>
        body,h1 { font-family: "Raleway", sans-serif }
        html, body {
             margin: 0;
             padding: 0;
             height: 100%;
        }
        .bgimg {
            background-image: url("http://www.w3schools.com/w3images/forestbridge.jpg");
            min-height: 100%;
        }
        #wrapper {
            color: white;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-content: center;
            align-items: stretch;
        }
        #navbar {
            border: 1px solid blue;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            align-items: center;
            flex-shrink: 0;
        }
        #navbar .box {
            background-color: #1b632a;
            padding: 0 2em 0 1em;
            margin: .2em .2em .2em 0;
        }
        #navbar .box a {
            text-decoration: none;
            color: inherit;
        }
        #main {
            align-self: center;
            text-align: center;
            border: 1px solid blue;
        }
        #main h1 { font-family: "Raleway", sans-serif; }
        #top_right {
            border: 1px solid blue;
            flex-shrink: 0;
        }
    </style>
    <body>
        <div id="wrapper" class="bgimg">
            <div id="navbar">
                <div class="box">
                    <h3><a href="http://www.google.com">Navbar 1</a></h3>
                </div>
                <div class="box">
                    <h3><a href="http://www.google.com">Navbar 2</a></h3>
                </div>
                <div class="box">
                    <h3><a href="http://www.google.com">Navbar 3</a></h3>
                </div>
            </div>
            <div id="main">
                <h1>I'd like this title to be centered on the webpage, not in between the other two 'rows'</h1>
                <hr style="border-color: #9e9e9e; width: 40%;">
                <p style="font-size: 60px; margin: auto;">∞</p>
            </div>
            <div id="top_right">
                <h3>&lt;== I'd like this to go over the top of the title</h3>
            </div>
        </div>

    </body>
</html>

具有大量空白的Flexbox格式

0 个答案: