CSS浮动在高度设置为自动时不起作用

Question

所以我要做的是让leftcontent div向左浮动，rightcontent div向左浮动并将内容div定位在它们之间。当我将专辑 div 的高度调整为实际像素大小而不是 auto 时，它工作得非常好，但是当高度为 auto 时，它不能正确浮动 div。

要查看当前代码在做什么，您可以转到http://www.robhorlacher.ca/images.php 进行查看。

HTML

    <?
    print "<div id=\"ccontainer\">";
    $execute_statement = "SELECT COUNT(*) FROM ImageAlbums";

    $results = mysql_query($execute_statement) or die ('Error executing SQL statement!!!');

    $entries =  mysql_fetch_row($results);

    $rownumber = $entries[0];

    $totalperpage = 3;

    $totalpages = ceil($rownumber / $totalperpage);

    if (isset($_GET['currentpage']) && is_numeric($_GET['currentpage'])) {

        $currentpage = (int) $_GET['currentpage'];

    } else {

        $currentpage = 1;
    }

    if ($currentpage > $totalpages) {

        $currentpage = $totalpages;
    }

    if ($currentpage < 1) {

        $currentpage = 1;

    }

    $offset = ($currentpage - 1) * $totalperpage;


    $execute_statement2 = "SELECT * FROM ImageAlbums LIMIT $offset, $totalperpage";

    $results2 = mysql_query($execute_statement2) or die ('Error executing SQL statement2!!!');

            while ($row = mysql_fetch_array($results2)) {

            $albumid = $row["AlbumID"];
            $album = $row["Album"];

    print "<div id=\"album\">";

    print "<div id=\"titlebar\">";

    print "<div id=\"lefttitle\"></div>";
    print "<div id=\"title\">";
    print "<br>";
    print "<br>";
    print $album;
    print "</div>";
    print "<div id=\"righttitle\"></div>";
    print "<div id=\"titlefooter\"></div>";

    print "</div>";

    print "<div id=\"contentarea\">";

    print "<div id=\"leftcontent\"></div>";
    print "<div id=\"content\">";

    $execute_statement3 = "SELECT * FROM Images WHERE AlbumID = $albumid";

        $results3 = mysql_query($execute_statement3) or die ('Error executing SQL statement3!!!');

            while ($row2 = mysql_fetch_array($results3)) {

            $picture = $row2["Extensions"];
            $description = $row2["Description"];

    print "<div id=\"image\">";
    print "<br>";
            print "<a href= \"uploads/$picture\" rel=\"shadowbox\">";
            print "<img src = \"uploads/$picture\" width=\"162\" height=\"162\">";
            print "</a>";
            print "</a>";
            print "<br>";
            print $description;
    print "</div>";
            }

    print "<div id=\"imgfooter\"></div>";

    print "</div>";

    print "<div id=\"rightcontent\"></div>";
    print "<div id=\"footercontent\"></div>";

    print "</div>";

    print "</div>";


            }
    print "</div>";

CSS


@charset "utf-8";
/* CSS Document */

* {
    margin: 0px;
    padding: 0px;
    margin: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}

body {
    background-color: #000; 
}

#ccontainer {
    width: 900px;


}

#ccontainer #album {
    width: 900px;
    height: auto;

}

#ccontainer #album #titlebar {
    width: 900px;
    height: 136px;  
}

#ccontainer #album #titlebar #lefttitle {
    width: 26px;
    height: 136px;
    float: left;
    background-color: #161616;
}

#ccontainer #album #titlebar #title {
    width: 211px;
    height: 136px;
    float: left;
    background-image: url(../images/album_title.jpg);
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #161616;
    text-align: center;
    vertical-align: bottom;
    font-size: 28px;
}

#ccontainer #album #titlebar #righttitle {
    width: 663px;
    height: 136px;
    float: left;
    background-image: url(../images/right_albumtitle.jpg);
}

#ccontainer #album #titlebar #titlefooter {
    width: 900px;
    clear: both;
}

#ccontainer #album #contentarea {
    width: 900px;
    height: auto;
}

#ccontainer #album #contentarea #leftcontent {
    width: 118px;
    height: auto;
    background-color: #161616;
    background-image: url(../images/under_albumtitle.jpg);
    float: left;
    background-repeat: no-repeat;
}

#ccontainer #album #contentarea #content {
    width: 694px;
    height: auto;
    float: right;
    background-color: #161616;
}

#ccontainer #album #contentarea #rightcontent {
    width: 88px;
    height: auto;
    float: right;
    background-color: #161616;
}

#ccontainer #album #contentarea #footercontent {
    width: 900px;
    clear: both;
}

#ccontainer #album #contentarea #content #image {
    width: 217px;
    height: 207px;
    background-image: url(../images/Image_Box.jpg);
    font-family: Verdana, Geneva, sans-serif;
    color: #000;
    margin: auto;
    text-align: center;
    float: left;
}

#ccontainer #album #contentarea #content #imgfooter {
    width: 694px;
    clear: both;
}

Answer 1

这种情况正在发生，因为那些 div 是空的。 div 必须具有内容或指定的高度才能显示在页面上。话虽如此，我想我明白你在做什么。以下是我更改的设置：

#ccontainer #album #contentarea {
    background-color: #161616;
    height: auto;
    width: 900px;
}

#ccontainer #album #contentarea #leftcontent {
    background-color: #161616;
    background-image: url("../images/under_albumtitle.jpg");
    background-repeat: no-repeat;
    float: left;
    height: 207px;
    width: 118px;
}

#ccontainer #album #contentarea #rightcontent {
    background-color: #161616;
    float: left;
    height: 207px;
    width: 88px;
}

#ccontainer #album #contentarea #content {
    background-color: #161616;
    float: left;
    height: auto;
    width: 694px;
}