用于网站导航的.css列

Question

对于我正在设计的电子烟网站，我有类似下面的内容：

<div id="top">
    //code
</div>
<div id="nav">
    //code
</div>
<div id="container">
    //code
</div>
<div id="bottom">
    //code
</div>

我希望以区域由<div>标签定义的方式构建它，而不是由内容本身定义。严格来说，特定<div>元素中的内容应按如下方式组织：

我尝试过像float这样的东西，看起来非常丑陋，文字也没有正确包装。我的第一个猜测是使用css column属性，但它将页面拆分为2个部分，其中底部和顶部<div>元素排列在一个或另一个之上，但从不都是。

如果这是一项非常简单的任务我很抱歉，但是虽然我是一个非常优秀的逻辑程序员，但css并不是我最强的诉讼，而且我通常会通过反复试验来设计，而不是死记硬背或功能。< / p>

一般的间距（即<div>元素的宽度）是我能够完成的事情，但只是定位事物是我不知所措。

这是HTML：

http://pastebin.com/xbSypPcn

这是CSS：

http://pastebin.com/mZnBHPP0

以下是它的外观图像：

http://imageshack.us/a/img706/5117/uzbn.png

这是我想要的样子的图像:(借口可怜的MSPaint工作）

http://imageshack.us/a/img571/9219/uxm1.png

请原谅这个非常丑陋的网站。在我提供它之前，我想把.css放下来让它更美观。

Answer 1

你应该使用这样的东西来完成你的风格任务：

#top {
display: block;
height: 200px;
}
#left {
display: block;
width: 300px;
height: 500px;
float: left;
}
#right {
display: block;
width: 700px;
height: 500px;
float: right;
}
#bottom {
display: block;
height: 200px;
}

将display：block与右浮动和高度和宽度设置相结合应该可以解决问题。我没有测试过这个，但这个概念可以帮助你朝着正确的方向前进。

此外，如果浮动将其关闭，您可以嵌套div标签以获得所需的文本效果。

例如： 您可能需要看起来像这样的HTML：

<div id="right">
<div id="right_content">
Your text here
</div>
</div>

修改/添加： 感谢您添加代码HTML和CSS与图像是伟大的！由于您使用的是“液体布局”％与px值...但您仍在使用px作为填充。我想知道你是否从#contianer和#nav css样式中获取了填充值，它可能会为你修复它。看来你现在非常接近。您只需要稍微修剪导航和容器，使它们看起来像您希望它们看起来一样。

如果您使用FF作为浏览器，可以使用一个名为Firebug的强大工具来“检查”您的文档。无论你指向什么，它都会显示html和相应的HTML。这个工具在很多场合“拯救了我的生命”。