0

这里的 CSS 初学者,我对一个相对简单的 css 布局束手无策,希望有人能帮我看看它..

我有什么:在此处输入图像描述

CSS 暂时嵌入,请原谅缩进(我刚从编程中来,缩进帮助我理解它):

<!DOCTYPE HTML>
<html lang="en">

<style>

* {margin: 0; padding:0;}
body
{
    font: normal 100% Helvetica, Arial, sans-serif;
    background-color: LightSkyBlue;
    margin: auto auto;
    max-width: 90%; 
}

#central_container
{
    background-color: Yellow;
    width: 100%;
    margin: auto auto;
    float: left;
}
#leftside_container
{
    background-color: Ivory;
    float: left;
    width: 66%; 
    clear: left;
}
    #header_container
    {
    background-color: DeepSkyBlue;
    width: 100%;
    height: 15em;
    }
        #header_title
        {
            background-color: Lime;
            width: 100%;
            height: 80%;
        }
            #header_title h1{ padding: 0; margin: 0; }
            
        #navbar_container
        {
            background-color: Coral;
            width: 100%;
            height: 20%;
        }
            .navbar_links{ background-color: HotPink; }
            
        #currentpage_content
        {
            background-color: grey;
            width: 100%;
            height: 20%;
        }

#rightside_container
{
    background-color: Khaki;
    float: right;
    width: 33%; <!--/* 320 /960 */-->
}
    #register_container
    {
        background-color: LightPink;
        width: 100%;
    }
    #contacts_content
    {
        background-color: SeaGreen;
        width: 100%;
    }

</style>


<head>
    <title>Verge Green IT</title>
    <link rel="stylesheet" href"CSS/base.css" type="text/css" />
</head>


<body>
<div id="central_container">


    <!--Left-side Current-page Content-->
    <div id="leftside_container">
    
        <!--Header-->
        <div id="header_container">
        
            <div id="header_title">
            <h1>#header_title</h1>
            </div>
        
            <!--Navbar-->
            <div id="navbar_container"> 
            <div class="navbar_links">
            </div>
            </div>
        
        
        </div>
        <!--Current Page Contents-->
        <div id="currentpage_content">
            <p> #currentpage_content</p>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p>
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
        
    </div>
    
    <!--Right-side Every-page Content-->
    <div id="rightside_container">
        <div id="register_container"><p> #register_container </p></div>
        <div id="contacts_content"><p> #contacts_content</p></div>
    </div>
    
    
</div>
</body>


</html>

我的目标是:在此处输入图像描述

(模糊文本替代:register_container 将 rightside_container 填充到 navbar_container 底部的高度。并且 contact_content 填充 rightside_container 的其余部分,就像 current_page 内容在 leftside_container 上一样。)

我想我遇到了一些麻烦,因为我正在尝试做浮动。我不知道为什么 register_container/contacts_content 左侧有空白的黄色空间。也不是为什么我可以为 header_title 之类的东西指定高度,但不能为 register_container 指定高度。

非常感谢任何帮助!

4

1 回答 1

1

我认为您在“宽度”和“高度”字段中给出的值存在一些小问题。

这对我来说很好。

<!DOCTYPE HTML>
<html lang="en">

<style>

* {margin: 0; padding:0;}
body
{
    font: normal 100% Helvetica, Arial, sans-serif;
    background-color: LightSkyBlue;
    margin: 0 auto;
    max-width: 90%; 
    height: auto;
}

#central_container
{
    background-color: Yellow;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    float: left;
}
#leftside_container
{
    background-color: Ivory;
    float: left;
    width: 66%; 
    clear: left;
}
    #header_container
    {
    background-color: DeepSkyBlue;
    width: 100%;
    height: 15em;
    }
        #header_title
        {
            background-color: Lime;
            width: 100%;
            height: 80%;
        }
            #header_title h1{ padding: 0; margin: 0; }

        #navbar_container
        {
            background-color: Coral;
            width: 100%;
            height: 20%;
        }
            .navbar_links{ background-color: HotPink; }

        #currentpage_content
        {
            background-color: grey;
            width: 100%;
            height: 20%;
        }

#rightside_container
{
    background-color: Khaki;
    float: right;
    width: 34%; <!--/* 320 /960 */-->
}
    #register_container
    {
        background-color: LightPink;
        width: 100%;
    height:240px;
    }
    #contacts_content
    {
        background-color: SeaGreen;
        width: 100%;
height:250px;
    }

</style>


<head>
    <title>Verge Green IT</title>
    <link rel="stylesheet" href"CSS/base.css" type="text/css" />
</head>


<body>
<div id="central_container">


    <!--Left-side Current-page Content-->
    <div id="leftside_container">

        <!--Header-->
        <div id="header_container">

            <div id="header_title">
            <h1>#header_title</h1>
            </div>

            <!--Navbar-->
            <div id="navbar_container"> 
            <div class="navbar_links">
            </div>
            </div>


        </div>
        <!--Current Page Contents-->
        <div id="currentpage_content">
            <p> #currentpage_content</p>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p>
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>

    </div>

    <!--Right-side Every-page Content-->
    <div id="rightside_container">
        <div id="register_container"><p> #register_container </p></div>
        <div id="contacts_content"><p> #contacts_content</p></div>
    </div>


</div>
</body>


</html>
于 2012-06-11T18:04:23.230 回答