Question

我经历了一个关于W3Schooles的长篇教程来学习CSS;我学到了一些基础知识，但仍然错过了我的主要目标：定位DIV

这就是我要做的事情

*---------*---------*
*         *         *
*         *         *
*---------*---------*

对于某些人来说，我的目标很简单而且微不足道，但是我很难做到这一点正确的方式，事实上我做到了但是当我向DIV添加更多文本时它会遇到很多问题或者他们只是与另一个DIV合并

我所做的只是使用FireBug使用边距和填充值。我现在需要的只是向我学习这个简单的（我希望）技巧，我缺少的是：这个简单的定位如何工作？我应该使用绝对的相对定位吗？更改边距，填充，大小??

如果您有一个很好的教程解释这一点，那么请指出它。我还有其他令人头疼的问题在谷歌上寻找。

Answer 1

看起来你正试图将两列彼此相邻。这很简单，深入讨论：

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

我倾向于远离位置属性，除非我必须覆盖一些元素。

Answer 2

在CSS

中创建2列布局

就我个人而言，我不喜欢使用明文：两者都在br标签上。

使用溢出：自动 on the parent div instead

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>

Answer 3

我很幸运地模仿了960 grid system中找到的代码。

正确的方式很难，因为很多东西并不是真正的跨浏览器兼容。浏览器越来越好，但如果你必须使用IE兼容的东西，它仍然是一场噩梦。（很多黑客）

Answer 4

凭借绝对定位，您绝对可以放置任何div。缺点是无论分辨率或显示页面的窗口大小，它们都会卡在这些位置。

您可以做的是将左列浮动到左侧，然后不指定浮动在右侧列上。保持默认定位不指定绝对定位或相对定义，然后根据需要调整元素的宽度。

Answer 5

如果你可以在你的div上设置特定的宽度，以下对我来说效果很好：

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

“float：left”使列并排排列。最后一个div（带有clear：both）使得在列之后放置的任何内容都保持在列之下。这样，您可以更改任一列的宽度，而不会弄乱另一列的样式。

Answer 6

<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>

如何在CSS中定位许多DIV

6 个答案:

在CSS