Question

这是一个全新的问题，所以提前谢谢。我试图了解div和span之间的区别，以及何时以及如何使用它们。

比方说，我希望图像左对齐，我希望文本在右边的图像周围流动，同时保持对齐。如果文本流过图像，我希望它环绕图像的底部......就像我们在布局世界中所说的那样，“换行”。

我正在寻找一个参考的例子，所以在你的回答中你能提供一个标记的例子吗？

非常感谢!!!

Answer 1

SPAN标记不是其他标记的容器。当与类结合使用时，这尤其有用。

使用div来定义页面的各个部分，并跨越以封闭和设置文本或文本类的样式。

http://www.learnwebdesignonline.com/htmlcourse/span-div.htm展示了如何使用它们的一个很好的例子。对于包装文本的示例，浮动图像并将其全部包装在DIV中 - 如下所示：

<div>
test test test test <img src="" alt="" style="float:left;margin:8px 0 0 8px; display:inline" /> test test test test test test test test test test test test 
</div>

Answer 2

块级别基本上是指默认情况下它在自己的行上开始，而内联则位于其他元素旁边。

[嵌段]

与

[在线] [在线]

然而，

两者都没有被包裹。如果您要将图像包裹在图像周围，则可以将图像浮动到一侧。这方面的一个例子如下

<img src="picture.jpg" alt="An image" style="float: left" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros. Curabitur posuere. Cras sodales leo quis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum adipiscing nunc vel arcu. Ut sed quam non est molestie commodo. Suspendisse metus erat, cursus fermentum, faucibus nec, pulvinar et, lorem. Praesent odio. In interdum imperdiet enim.

Answer 3

Divs和spans类似于没有语义含义的通配符。当没有其他标记适合时（例如表，列表或标题），您可以使用它们来分组或标识元素。他们的不同之处在于：

div

这是一个块级元素
默认显示属性是块，表示：
- 与容器一样宽
- 始终在
可以包含其他块级元素，例如p，h1，table，ul，blockquote，div
可以包含其他内嵌元素，例如img，strong，em，input，a，span

span

是内联元素
默认显示属性为内联，表示：
- 与其内容一样窄
- 如果没有必要，不会进行任何换行）
- 您可以使用css属性vertical-align
可以不包含块级元素
可以包含其他内嵌元素，例如img，strong，em，input，a，span

您始终可以使用css更改其默认显示属性，但无论显示属性值如何，都无法更改它们可以包含的元素类型。例如：

<span style="display:block">
    this will be displayed like a div,
    but still cannnot contain block level elements
</span>

因为它们是“通用”标记，所以它们通常与类一起用于microformats。例如：<span class="tel">555-5555</span>，因为没有<tel>标记。

对于图像包装，如果图像与文本直接相关，则可以使用：

<p><img src="image.jpg" style="float: right" alt="my image" />Long paragraph.</p>

不需要div或span。但是，如果不是，那么您可以使用：

<p>unrelated to the image</p>
<div>
<img src="image.jpg" style="float: right" alt="my image" />
<p>Long paragraph.</p>
</div>

此处div是必需的，因为p是块级元素。

最后，有关详情，请查看the official W3C spec topic有关div和span的内容。

格式化内联项？一般代码是什么样的？

3 个答案: