使用br或div进行分节

时间:2012-10-03 22:07:12

标签: css layout html

我曾在很少的地方工作,并且看过两种不同的方法在HTML中进行分段或换行。

我看到它完成的一种方式是:

<div class="placeholder-100pct">&nbsp;</div>

另一个是使用普通的<br />

一方面对另一方有什么好处,还是只是风格问题?

6 个答案:

答案 0 :(得分:14)

如果您想在段落中添加新行,请使用<br/>

<p>Hi Josh, <br/> How are you?</p>

这在编写地址时可能很有用:

<p>John Dough<br/>
1155 Saint. St. #33<br/>
Orlando, FL 32765
</p>

使用div将自动为您提供一个新行,但如果您想在两个元素之间留出空格,则可以在div上使用边距。

不要使用<br/>在两个div之间获得一些空间:

<!-- This is not preferred -->
<div>Hello</div>
<br/>
<div>Something else here</div>

希望这有帮助

答案 1 :(得分:7)

div是一个通用容器。 br是中断。两者都不适合表达分节符。

HTML 5引入了sections。你标记每个部分,而不是它们之间的断裂。

<section>
  <!-- This is a section -->
</section>
<section>
  <!-- This is another section -->
</section>

答案 2 :(得分:4)

使用&lt; br /&gt;当它具有语义意义时。如果你需要的只是一个换行符,那就是它的用途。如果您尝试拆分不同类型内容的部分,则每个部分应该位于自己的容器中。例如,如果你有一个地址,地址的每一行都会显示在一个单独的行上,那么这样做是有道理的:

<address>
123 Main Street<br />
Anywhere, USA 12345
</address>

答案 3 :(得分:4)

一个明显的区别是<br>是内联元素,而<div>则不是。

所以这个:

<span>Some text broken into <br /> lines</span>

...是有效的HTML代码,而这个:

<span>Some text broken into <div>&nbsp;</div> lines</span>

...不是,因为你不能将块元素放在内联元素中。

答案 4 :(得分:2)

<br>的缺点是将各个部分之间的间隙大小限制为应用于或由其所在的<span>继承的行高。

换句话说,使用<br>时,中断的大小只能正好是一行文本的高度。

如果要保留对间距的任何控制,请务必将每个的“部分”包装在自己的标签中,并使用边距来控制间距。差异不仅仅在于标记的语义。

答案 5 :(得分:1)

如果您希望在主题中断的意义上在内容的两个部分之间提供分隔符,那么<hr>是您应该使用的元素。

W3C specification

hr元素代表段落级别的主题中断,例如,故事中的场景更改或在参考书的某个部分中过渡到另一个主题。

根据需要对它们进行样式设置也相对简单,因为它们可以采用您需要的任何大小。但是请注意,它是一个void元素,不能包含内容(尽管您当然可以根据需要向其中添加背景图片)。