0

我在处理我的网站上的 div 时遇到问题。我将三个 div“sidebarleft”、“content”和“sidebarright”放置在“容器”div 中。如果 'content' div 中没有内容，则其他两个 div 工作正常。但是每当我将任何内容添加到“容器”div 时，“sidebarright”都会从“内容”div 的底部开始。有什么建议么？

这是我的代码：

主页.php：

<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="content">
        <img align="center" src="images/good_luck.gif">
        </div>

        <div class="sidebarright"><font class="common">
        <script type="text/javascript"><!--
        google_ad_client = "ca-pub-4380835311996732";
        /* haryanamcresults_sidebar-right-1_AdSense3_160x600_as */
        google_ad_slot = "1081438655";
        google_ad_width = 160;
        google_ad_height = 600;
        //-->
        </script>
        <script type="text/javascript"
        src="//pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
        </font>
        </div>  

        <div class="clearfix">
        </div>
</div>

样式表.php：

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;
}
.clearfix{
    clear:both;
}
4

1 回答 1

0

首先总width应该是100%，不超过那个。然后，float元素正确。这是具有更新样式的解决方案（小提琴） http://jsfiddle.net/ZTe5w/3/

于 2013-09-21T13:57:25.113 回答