-1

我正在尝试使用 div 重新设计我的网站（之前它是使用表格设计的）。我面临的一个问题是容器背景仅限于页面的deaher，尽管所有内容都放在容器div中。

此外，如果我将任何内容放在“内容”div 中，“右侧栏”会滑到“内容”div 的底部。请就这两个问题提供帮助。

我的 homepage.php 代码：

    <body>
<div class="container">
    <?php
    include "header1.php"
    ?>
        <div class="sidebarleft"><font class="common">
        <ul>
        <li style="font-weight:bold; font-size:26; align:center;">Categories</li>
        <li style="font-size:26;"><a href="pol_score_reset.php">Politics</a></li>
        <li style="font-size:26;"><a href="ps_score_reset.php">Programming Skills</a></li>
        <li style="font-size:26;"><a href="gk_score_reset.php">general knowledge</a></li>
        </ul></font>
        </div>



        <div class="sidebarright"><font class="common">
        <--Google Adsense Ad-->
        </font>
        </div>  

</div>  
</body>

header1.php：

    <div class="header">
<a href="homepage.php"><img class="logo" src="images/logo.png"/></a>
    <div style="width:728px; height:20; float:right; margin-top:20px; margin-right:10px;">
    <-- Google AdSense Ad-->

    </div>
<br/>
    <table width="100%" border="10">
        <tr>
            <td width="16.7%"><a href="homepage.php"><em>Home</em></a></td>
            <td width="16.7%"><a href="aboutus.php?us">About us</a></td>
            <td width="16.7%"><a href="contactus.php?us">Contact us</a></td>
            <td width="16.7%"><a href="privacy policy.php?us">Privacy policy</a></td>
            <td width="16.7%"><a href="user_cp.php">Past Quizzes</a></td>
            <td width="16.7%"><a href="logout.php">Logout</a></td>
        </tr>
    </table>
</div>
<br />

样式表：

    body
    {
    height:100%;
    background-image:url(images/background.jpg);
    background-position: top left;
    background-attachment: fixed;
    }
        div.header{
        width:100%;
        }
        div.container{
        width:80%;
        height:100%;
        margin-left:10%;
        margin-right:10%;
        background:gray;
        display:block;
        }
        div.sidebarleft{
        width:20%;
        float:left;
        }
        div.contentmain{
        width:75%;
        float:left;
        }
        div.sidebarright{
        width:20%;
        float:right;
}
4

1 回答 1

0

将 HTML 更改为：

<body>
<div class="container">
    <?php
    include "header1.php"
    ?>
        <div class="sidebarleft"><font class="common">
        <ul>
        <li style="font-weight:bold; font-size:26; align:center;">Categories</li>
        <li style="font-size:26;"><a href="pol_score_reset.php">Politics</a></li>
        <li style="font-size:26;"><a href="ps_score_reset.php">Programming Skills</a></li>
        <li style="font-size:26;"><a href="gk_score_reset.php">general knowledge</a></li>
        </ul></font>
        </div>



        <div class="sidebarright"><font class="common">
        <--Google Adsense Ad-->
        </font>
        </div>  
        <div class="clearfix"></div>

</div>  
</body>

并为您添加以下样式：

.clearfix{
   clear: both;
}

这个简单的方法使包含的 div 覆盖了您向左浮动的那些 div。

于 2013-09-21T13:22:15.077 回答