Question

我从另一个正确显示（水平）文件的文件中复制并粘贴了我的CSS和HTML，但现在这些元素是垂直排列的？

我的页面HTML：

<!DOCTYPE HTML>
<html>

<head>
    <title>REALSURF</title>
    <link rel="stylesheet" type="text/css"
    href="{{ url_for('static', filename='landingPage.css')}}">
    <link href="https://fonts.googleapis.com/css?family=Biryani:300,400,800"
    rel="stylesheet">
</head>
<body>

    <h1>REALSURF</h1>

    <div class="container">
        <div class="column">
            <div class="text">Scripps</div>
        </div>
        <div class="column">
            <div class="text">Blacks</div>
        </div>
        <div class="column">
            <div class="text">Cardiff</div>
        </div>
    </div>

    <!-- commented because its a local file
    <img src="/static/images/realsurf topo background lowered.png">
    -->

</body>
</html>

我的页面CSS：

body, html{
    padding:0;
    margin:0;
}

h1 {
    font-family: 'Biryani', sans-serif;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    color: #4C4C4D;
}

img {
    width: 100%;
    background-size: 100% 100%;
    background-position: center, bottom;
    position: fixed;
    bottom: 0px;
    }

    .container {
        display: flex;
        width: 100%;
        padding-top: 130px;
    }

    .column {
        text-align: center;
        flex-grow: 1;
    }

    .text {
        font-family: 'Biryani', sans-serif;
        font-size: 14px;
        font-weight: lighter;
        text-align: center;
        color: #4C4C4D;
    }

我希望REALSURF下面的3个元素是水平排列而不是垂直排列

容器元件是垂直排列而不是水平？

0 个答案: