Question

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

以下是我的代码：

homepage.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>

stylesheet.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;
}

Answer 1

首先，总width应该是100%，而不是更多。然后，float元素正确。以下是更新样式http://jsfiddle.net/ZTe5w/3/

的解决方案（小提琴）

右侧栏从内容div中的内容底部开始

1 个答案: