Question

我进行了搜索并在tweek左右进行搜索，最后一张图片仍然显示得非常接近第二张图片。这是一个非常简单的响应式Web布局，由于某些错误，它无法正确显示。这一直问我更多细节，但我没有更多细节要提供。

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    background-color: #f4f4f4;
}


/* Global */

.container {
    widows: 80%;
    margin: auto;
    overflow: hidden;
}

ul {
    margin: 0;
    padding: 0;
}

.button_1 {
    height: 38px;
    background: #e8491d;
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    color: #ffffff;
}


/* Header */

header {
    background: #35424a;
    color: #ffffff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #e8491d 4px solid;
}

header a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

header li {
    float: left;
    display: inline;
    padding: 0 20px 0 20px;
}

header #branding {
    float: left;
}

header #branding h1 {
    margin: 0;
}

header nav {
    float: right;
    margin-top: 12px;
}

header .current a {
    color: #e8491d;
    font-weight: bold;
}

header a:hover {
    color: #cccccc;
    font-weight: bold;
}


/* Showcase */

#showcase {
    min-height: 400px;
    background: url('../Assets/for\ rent.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    text-align: center;
    color: #3433FF;
}

#showcase h1 {
    margin-top: 100px;
    font-size: 55px;
    margin-bottom: 10px;
}

#showcase p {
    font-size: 20px;
}


/* For Tenants */

#cozy {
    padding: 15px;
    background: #35424a;
}

.button_1 {
    float: right;
    margin-top: 15px;
}


/*Boxes*/

#boxes {
    margin-top: 20px;
}

#boxes .box {
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;
}

#main {
    margin-top: 20px;
}

#main .box {
    float: left;
    text-align: center;
    width: 33%;
    padding: 10px;
    display: inline-block;
}

#main .box assets {
    width: 100px;
}


/*Footer*/

footer {
    padding: 20px;
    margin-top: 20px;
    color: #ffffff;
    background-color: #e8491d;
    text-align: center;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Properties for lease">
    <meta name="keywords" content="lakeland, oldsmar, lutz">
    <meta name="author" content="SAGS PROPERTIES LLC">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SAGS PROPERTIES</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />
    <script src="main.js"></script>
</head>

<body>
    <header>
        <div class="container">
            <div id="branding">
                <h1><span>SAGS Properties LLC</span></h1>
            </div>
            <nav>
                <ul>
                    <li class="current"><a href="index.html">Home</a></li>
                    <li><a href="lutz.html">Lutz</a></li>
                    <li><a href="oldsmar.html">Oldsmar</a></li>
                    <li><a href="lakeland.html">Lakeland</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="showcase">
        <div class="container">
            <h1>Well Managed Properties</h1>
            <p>In Lutz, Oldsmar and Lakeland</p>

        </div>
    </section>

    <section id="cozy">
        <div class="container">
            <button type="submit" class="button_1">Tenants Click Here</button>
        </div>
    </section>

    <section id="boxes">
        <div class="container">
            <div class="box">
                <img src="./Assets/Entrance Lutz.jpg">
                <h3>Lutz</h3>
                <p>Lakeview at Calusa Trace</p>
            </div>
            <div class="container">
                <div class="box">
                    <img src="./Assets/Entrance Lakeland.jpg">
                    <h3>Lakeland</h3>
                    <p>Cobblestone Landing</p>
                </div>
                <div class="container">
                    <div class="box">
                        <img src="./Assets/Entrance Oldsmar.jpg">
                        <h3>Oldsmar</h3>
                        <p>Gardens at Forrest Lakes</p>
                    </div>
                </div>
    </section>

    <footer>
        <p>SAGS PROPERTIES LLC &copy; 2018</p>
    </footer>
</body>

</html>

没有更多细节可提供。提出问题就像学习这个问题一样令人沮丧！

为什么没有正确分离图像？

0 个答案: