Question

我正在尝试克隆BBC网站用于教育目的。

我的新闻栏和topicdiv divs拒绝填写屏幕的宽度。我想帮助理解为什么以及如何解决这个问题。

非常感谢任何帮助。

name

Answer 1

只需切换这两个div：

<div class="fixedwidth">
    <div id="topbar">

切换它们会使#topbar继承其父宽度。

demo

Answer 2

这是我做的：

.fixedwidth {
    //width:1000px;
    margin:0 auto;
}
#topicdiv {
    margin:0;
    background-color:#A91717;
    width:100%;
    //height:37px;
    position:absolute;
}

Here is the JSFiddle demo

Answer 3

这两个div都嵌套在宽度为1000px的固定宽度div中。使用该对象可用的空间计算百分比，因此这些div的100％将是1000px而不是屏幕的整个宽度。

Answer 4

＆＃13;

<!doctype html>
<html>
<head>
<title>Darren's BBC</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">

    body {
        margin:0;
        background-color:violet;
        <!--This ensures the topbar stretches all the way across the screen and fills the top-->

    }

    #topbar {
        background-color:rgb(255,255,255);
        width:100%;
        height:40px;
        color:black;
        font-family:arial,helvetica,sans-serif;
        font-weight:bold;
        font-size:0.8em;
    }

    

    .fixedwidth {
        width:1000px;
        margin:0 auto;
    }

    #logodiv {
        padding-top:4px;
        padding-right:5px;
        padding-bottom:4px;
        float:left;
        border-right:1px solid #DDDDDD;
    }

    #signindiv {
        padding:8px 85px 11px 15px;
        float:left;
        border-right:1px solid #DDDDDD;

    }

    #signindiv img {
        position:relative;
        top:3px;
        padding-right:2px;
    }

    #menudiv ul {
        margin:0;
    }

    #menudiv li {
        padding:14px 17px 10px 17px;
        list-style:none;
        float:left;
        border-right:1px solid #DDDDDD;
    }

    #searchdiv {
        float:left;
        padding:8px 0 0 10px;
    }

    #searchdiv input {
        border:none;
        background-color:#E4E4E4;
        height:24px;
        width:190px;
        font-weight:bold;
        font-size:0.9em;
        padding:0 5px 0 5px;
        background-image:url("images/search.png");
        background-repeat:no-repeat;
        background-position:right center;
    }

    #newsbar {
        background-color:#BB1919;
        height:55px;
    }

    #newsbar p {
        margin:0;
        font-size:2.7em;
        color:white;
        font-family:Verdana, Geneva, sans-serif;
        padding-left:50px;
        margin: 0 auto;
        width: 1000px;
    }

    .break {
        clear:both;
    }

    #topicdiv {
        margin:0;
        background-color:#A91717;
        width:100%;
        height:37px;

    }

    #topicdiv ul {
        margin:0;
        padding:12px 0 5px 37px;
        margin: 0 auto;
        width: 1000px;
    }

    #topicdiv li {
        color:white;
        font-family:Arial, Helvetica, sans-serif;
        font-size:1em;
        list-style:none;
        float:left;
        border-right:1px solid #B73C3C;
        padding-left:11px;
        padding-right:11px;
    }

</style>


<div id="container">

    <div id="topbar">
    	

        <div class="fixedwidth">

                <div id="logodiv">

                    <img src="images/bbclogo.png" />

                </div>

                <div id="signindiv">

                    <img src="images/signin.png" /> Sign In

                </div>

                <div id="menudiv">

                    <ul>
                        <li>News</li>
                        <li>Sport</li>
                        <li>Weather</li>
                        <li>Shop</li>
                        <li>Earth</li>
                        <li>Travel</li>
                        <li>More...</li>
                    </ul>

                </div>

                <div id="searchdiv">

                    <input type="text" placeholder="Search" />

                </div>

               

        </div>
         <div class="break"></div>

                <div id="newsbar">

                    <p>NEWS</p>

                </div>

                <div class="break"></div>

                <div id="topicdiv">

                    <ul>
                        <li>Home</li>
                        <li>Video</li>
                        <li>World</li>
                        <li>Asia</li>
                        <li>UK</li>
                        <li>Business</li>
                        <li>Tech</li>
                        <li>Science</li>
                        <li>Magazine</li>
                        <li>Entertainment & Arts</li>
                        <li>Health</li>
                        <li>World News TV</li>
                        <li style="border-right:none">More...</li>
                    </ul>

                </div>

    </div>    
   

</div>

</body>
</html>

＆＃13;

我的一些div不会填满屏幕的宽度。我该如何解决？

4 个答案: