Question

我有这个网页，我用它练习一些html和css而不使用任何所见即所得的编辑器。但是，有些事情我找不到如何实施。

标题我想把它放在一边。并且不显示标题和容器边框之间的空白
段落文本将从容器中移出。我怎么能把文字留在里面？
页脚不显示

HTML

<div id="container">
    <div id="header">
        <h1>My Resume</h1>
    </div>
    <div id="sidebar">
        <ul>
            <li><a href="localhost">Java</a></li>
            <li><a href="localhost">Bash</a></li>
            <li><a href="localhost">PHP</a></li>
            <li><a href="localhost">MySQL</a></li>
        </ul>
    </div>
    <div id="mainContent">
        <p>akdjfaskdfjasdkfjaskdfjaskdfjaskdfjaskdjfskdfjassdkjfadfkjasdkfjaadfkakdfjadkfjdskfa</p>

        <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
        </ol>
        <a href="localhost"><img src="localhost"></a>
    </div>
    <div id="footer">
    </div>
</div>

CSS

h1 {
    text-align:center;
}

#container {
    width:800px;
    height:500px;
    background-color:#ffffff;
    margin:auto;
    border:1px solid #000000;
    /*text-align:left;*/
}

#header {
    text-align:center;
    height:200px;
    background-color:brown;
    margin:0 auto;


}

#sidebar {
    margin:0 auto;
    float:left;
    width:200px;
    height:200px;
    background:red;

}

#mainContent {
    margin:0 auto;
    background-color:white;
    width:600px;
    height:200px;
    float:left;
}

#footer {
    height:50px;
    margin:0 auto;
    background-color:orange;
}

Answer 1

尝试将此项放在CSS的顶部作为初学者

            *
            {
                padding:0;
                margin:0;
            }

这将默认所有元素，并带走额外的填充和边距浏览器添加。

然后给每个元素提供自己的边距或填充或者没有。

Answer 2

我将这些添加到你的css：

/* added to remove whitespace */
*
{
    margin: 0;
}

/* added to #mainContent to wrap text */
        white-space: -moz-pre-wrap !important;  
        white-space: -pre-wrap;      
        white-space: -o-pre-wrap;    
        white-space: pre-wrap;       
        word-wrap: break-word;      
        word-break: break-all;
        white-space: normal;

 /* added to #footer to make it appear */
        width: 100%;
        overflow: hidden;

演示here

Answer 3

您的3个问题已解决，请参阅此FIDDLE DEMO

* {
    padding:0;
    margin:0;
} 
#mainContent p{
    word-wrap:break-word;
}
#footer {
    clear:both;
    height:50px;
    margin:0 auto;
    background-color:orange;
}

将clear:both;添加到您的页脚中。有关详细信息：clear

Answer 4

Guess you should take care of the height of the footer which is defined as 50px; Because your footer style got merged with your container and hence you were not able to see your footer.
Your css should be some what like this:
h1 {
        text-align:center;
    }

    #container {
        width:800px;
        height:800px;
        background-color:#ffffff;
        margin:auto;
        border:1px solid #000000;
        /*text-align:left;*/
    }

    #header {
        text-align:center;
        height:200px;
        background-color:brown;
        margin:0 auto;


    }

    #sidebar {
        margin:0 auto;
        float:left;
        width:200px;
        height:200px;
        background-color:red;

    }

    #mainContent {
        margin:0 auto;
        background-color:Cyan;
        width:600px;
        height:200px;
        float:left;
    }

    #footer {
        height:200px;
            width:800px;
        margin:0 auto;
        background:Green;
    }

我的css代码中的布局有问题

4 个答案: