0

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

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

我想以一种区域由<div>标签而不是内容本身定义的方式来构建它。严格来说，特定<div>元素中的事物应该像下面这样组织：

div 列

我已经尝试过类似的东西float，它看起来非常难看，而且文本不能正确换行。我的第一个猜测是使用 csscolumn属性，但它将页面分成两部分，底部和顶部<div>元素排列在一个或另一个之上，但从不同时排列。

如果这是一项微不足道的任务，我深表歉意，但是虽然我是一个非常好的逻辑程序员，但 css 并不是我的强项，我通常通过反复试验而不是死记硬背来设计它。

一般间距（即宽度<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 之前先把它弄下来，让它更美观。

4

1 回答 1

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，非常棒！由于您使用的是“液体布局”% vs. px 值......但您仍在使用 px 作为填充。我想知道您是否将填充值全部从#contianer 和#nav css 样式中取出，它可能会为您修复它。看来你现在很亲近了。您只需稍微修剪导航和容器，使它们看起来像您期望的那样。

如果您使用 FF 作为浏览器，有一个很棒的工具叫做 Firebug，您可以使用它来“检查”您的文档。它会向您显示您指向的任何内容的 html 和相应的 HTML。这个工具在很多场合都“救了我的命”。

于 2013-10-18T00:30:32.403 回答