Question

我正在尝试制作一个基本的网页，因为我刚刚开始使用HTML和CSS进行编码，并且出现了一些问题......

我正在做一个带有标题，3列和页脚的基本网页。一切都很好，除了第三列：它是在第一列，我甚至不知道如何解决这个问题。

HTML STUFF：

http://pastebin.com/vvg1LSiz

这是我的CSS内容：

http://pastebin.com/dSN83Bs6

Answer 1

以下是您要注意的事项：

您的左右列不包含在内容包装器中。
在更改在内容包装器div中移动它们之后，你强制左栏的余量
您没有为内容列中间放置宽度
左栏和右栏不需要您的保证金
右栏应该向右浮动，而不是向左浮动

以下是更新后的更改： *注意：抱歉，样式不在单独的样式表中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<style>
/* CSS Document */

body{
        margin:0;
        padding:0;
        line-height: 1.3em;
}

#wrapper{
        width: 1120px;
        margin: 0 auto;
}

#headerdiv{
        background: #000;
        height: 90px;
}

#headerdiv h1{
        margin: 0;
        padding-top: 15px;
        color: #C30;
}

#content-wrapper{
        float: left;
        width: 100%;
}

#content-column{
        padding: 10px 5px;
        margin: 0 auto;
        width: 600px;
        border: 1px solid #DDDDDD;
        -moz-box-shadow: 1px 1px 1px #D4D4D4;
        -webkit-box-shadow: 0px -0.9px 5px #D4D4D4;
}

#left-column{
        padding: 10px 5px;
        float: left;
        width: 235px;
       margin: 0;
        background: #FFF;
}

#right-column{
        padding: 10px 5px;
        float: right;
        width: 235px;
        margin-left: 0;
        background: #FFF;
}

#footer{
        clear: left;
        width: 100%;
        background: black;
        color: #FFF;
        text-align: center;
        padding: 4px 0;
}

#footer a{
        color: #FFFF80;
}

.sidediv{
        margin: 10px;
        margin-top: 0;
}
</style>
</head>
<body>
<div id="wrapper">

<div id="headerdiv"><div class="sidediv"><h1>Um logo qualquer por aí</h1></div></div>

<div id="content-wrapper">
<div id="left-column">
<div class="sidediv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>

</div>
<div id="right-column">
<div class="sidediv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
</div>
<div id="content-column">
<div class="sidediv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
</div>

</div>





<div id="footer">Oi, eu sou um footer! :D</div>

</div>
</body>
</html>

Answer 2

您的 html 是这样的：

<div id="wrapper"></div>
    <div id="headerdiv"></div>
    <div id="content-wrapper">
        <div id="content-column"></div>
    </div>
    <div id="left-column"></div>
    <div id="right-column"></div>
    <div id="footer"></div>
</div>

你应结构，如 this ：

<div id="wrapper"></div>
    <div id="headerdiv"></div>
    <div id="content-wrapper">
        <div id="left-column"></div>
        <div id="content-column"></div>
        <div id="right-column"></div>
    </div>
    <div id="footer"></div>
</div>

CSS专栏问题

2 个答案: