Question

我正在创建一个网页，当以最小的水平分辨率查看时，我的ID元素不会像我的CLASS元素那样填充页面空间，尽管具有相同的属性。我错过了什么？

CSS：

     body {
        margin:auto;
        width:95%;
        text-align:center;
        background-image:url('images/grey_sandbag.png');
    }
    .banner h1 {
        margin-top:0;
    }
    .banner {
        font-family:'Lemon', cursive;
        font-size:1em;
        padding:0 1em;
        color:#464a4d;
        background: radial-gradient(#edd1ca, #9e885d, #677564);
        border-bottom-right-radius: 50px;
        border-bottom-left-radius: 50px;
        box-shadow:5px 5px 5px #888888;
    }
    .nav li {
        background: radial-gradient(#d0d499, #d0d499, #e8c997);
        color:#464a4d;
        margin:0.7em;
        border:solid 2px #d0d499;
        border-radius:2em;
        box-shadow:5px 5px 5px #888888;
        font-weight:bold;
        font-size:1em;
        display:block;
        line-height:1.5em;
        padding:0em 1.8em;
    }
    .nav ul {
        list-style:none;
        padding-left:0;
        line-height: 1.5em;
        margin: 1em 0em 1em;
    }
    div.display {
        margin: 1em 1em 1em 0;
        padding: .4em;
        border:1px solid #ffe187;
        height:auto;
        width:95%;
        display:block;
        text-align:center;
        box-shadow:5px 5px 5px #888888;
        border-radius:2em;
        background: radial-gradient(#d4c7ac, #d4c7ac, #ffe187)
    }
    div.display img {
        display:inline;
        margin:5px;
        border:1px solid #d4c7ac;
        width:90%;
        border-radius:1em;
    }
    div.desc {
        text-align:center;
        font-weight:normal;
        padding:1%;
        width:95%;
    }
    div#bio-box {
        margin: 1em 0em 1em 0;
        padding: .4em;
        border:1px solid #ffe187;
        height:auto;
        width:95%;
        float:right;
        text-align:center;
        box-shadow:5px 5px 5px #888888;
        border-radius:2em;
        background: radial-gradient(#d4c7ac, #d4c7ac, #ffe187)
    }
    div#bio-box img {
        display:inline;
        margin:5px;
        border:1px solid #d4c7ac;
        width:90%;
        border-radius:1em;
    }
    @media screen and (min-width : 550px) {
        .nav ul {
            width:34%;
            float:right;
            ;
        }
        div.display-container {
            width:65%;
            float:left;
            margin-right:0px;
            padding-right:0;
        }
    }
    div#bio-box {
        width:30%;
        float:right;
    }
    div#bio-box img {
        float:left;
    }
    @media screen and (min-width : 800px) {
        .nav ul {
            float:none;
            display:inline;
        }
        .nav li {
            display:inline;
        }
        div.display-container {
            width:80%;
            float:left;
        }
        div#bio-box {
            width:15%;
            float:right;
        }
        div#bio-box img {
            float:left;
        }
    }
    @media screen and (min-width : 950px) {
        body {
            max-width:1400px;
        }
        .nav li {
            margin:0 1.4em;
        }
        div.display-container {
            width:90%;
            float:none;
            margin:0 5%;
        }
        div.display {
            width:43%;
            float:left;
            margin-left:1.5em;
        }
        div#bio-box {
            margin:0 25%;
            width:50%;
        }
        div#bio-box h2 {
            float:right;
            width:60%;
            margin-top:.2em;
        }
        div#bio-box p {
            float:right;
        }
        div#bio-box img {
            width:35%;
            float:left;
        }
    }

HTML：

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Earth Weaver Studios</title>
        <link href='http://fonts.googleapis.com/css?family=Lemon' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="custom.css">
    </head>

    <body>
        <div class="container">
            <div class="banner">
                <h1>Earth Weaver Studios</h1>
            </div>
            <div class="nav">
                <ul>
                    <li>Dining</li>
                    <li>Jewelry</li>
                    <li>Ceramics</li>
                    <li>Blacksmithing</li>
                    <li>Orders</li>
                </ul>
            </div>
            <div class="display-container">
                <div class="display">
                    <img src="images/cups.png">
                    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </div>
                <div class="display">
                    <img src="images/ring.png">
                    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </div>
            </div>
            <div id="bio-box">
                    <h2>The Weaver Himself</h2>

                <img src="images/nate.png">
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
        </div>
    </body>

</html>

Answer 1

这一行是问题

div#bio-box {
    width: 30%;
    float: right;
}

尝试删除某些像素宽度后的30％宽度，如：

@media screen and (max-width: 799px){
    div#bio-box {
        width: 100% !important;
    } 
}

！important应该只用于测试目的，你可以做这样的事情。

div#bio-box {
    float: right;
} 

@media screen and (max-width: 699px){
    div#bio-box {
        width: 30% !important;
    } 
}

@media screen and (min-width: 700px){
    div#bio-box {
        width: 100% !important;
    }
}

为什么我的ID不像我的CLASS元素那样填充页面的宽度？

1 个答案: