3

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

这就是我想要做的

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

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

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

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

4

6 回答 6

6

看起来您正试图将两列彼此相邻浮动。这相当简单，并且在这里进行了深入介绍：

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

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

于 2009-06-21T23:55:57.310 回答
5

在 CSS 中创建 2 列布局

就个人而言，我不喜欢在 br 标签上使用 clear:both。

在父 div 上使用溢出：自动 

<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>
于 2009-06-22T09:29:13.973 回答
1

我很幸运能够模拟960 网格系统中的代码。

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

于 2009-06-21T23:52:48.593 回答
0 
<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>
于 2009-06-22T02:20:41.777 回答
0

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

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

于 2009-06-21T23:55:30.743 回答
0

如果您可以在 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>

“浮动：左”使列并排排列。最后一个 div （使用 clear: both）使您在列之后放置的任何内容都保留在列下方。这样，您可以更改任一列的宽度，而不会弄乱另一列的样式。

于 2009-06-22T00:03:04.877 回答