Question

我是程序员，不是设计师，我不喜欢编写html和css代码。我长时间使用表格进行布局。现在，我想打破这种不良做法并开始在我的网站上使用div。这对我来说是一个非常重要的决定。因为我真的讨厌使用div。

与往常一样，我开始阅读书面代码，以了解div的定位是如何工作的，这是我学习新东西的最佳方式。但是，我真的无法理解。我觉得有些不对劲。我真的认为，这应该不是那么难。这个div“ API ”写错了，本来应该更简单。但是，我知道这个讨论没有意义。

我现在对以下项目的使用感到困惑，

float, clear, inline, block, position, relative, absolute

我正在寻找网站，stackoverflow帖子，为有像我这样的编程背景的初学者学习div的教程。

PS：我检查了w3的CSS标准。但是，它太长而且详细。我想要一些更短，更容易理解的实用目的。

Answer 1

当我自学HTML时，我花了很多时间在W3Schools网站上。我根本找不到更好的学习HTML和CSS的地方。下面是一个演示float如何工作的示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
img 
{
float:right;
}
</style>
</head>

<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p>
<img src="http://vsual.co/wp-content/uploads/2011/09/HumanRightsLogo_CO.jpg" width="95" height="84" />
This is some text. This is some text. This is some text.

</p>
</body>

</html>

如果您仍不确定，请随时访问W3Schools link 1和W3Schools Editor

我希望这会有所帮助

Answer 2

我建议查看http://net.tutsplus.com上的文章以及相关的webdesign.tutsplus网站。

在他们的网络上还有一个关于CSS的非常好的入门课程，但它不是免费的。

无论如何，这并不难。

您有几种类型的元素：您最常使用的块，内联和在线块。其他人将被用作默认值。

Div是块元素，因此它们通常采用其父元素的while权重和所需的高度。为了形成复杂的布局和列，有时我们使用float，它通过将div放在页面流之外来改变它，以便其他元素堆叠在它旁边。

这是一个非常粗略，可能不够准确的描述，但应该作为一个起点。

也一定要看看这个：http://learnlayout.com 这是一个很好的解释CSS布局的例子。

我希望这会帮助你找到适合自己的方式。

Div初学者定位教程

2 个答案: