在 div 中创建换行符

Question

我将有 3 个并排的图标，当窗口缩小时它们会向左浮动。在每个图标下，我想添加一些文字。正如你在下面看到的那样，我几乎可以得到它。

.icons {
	BORDER-TOP: black 1px solid; 
  HEIGHT: 100px; 
  BORDER-RIGHT: black 1px solid; 
  WIDTH: 100px; 
  BORDER-BOTTOM: black 1px solid; 
  FLOAT: left; 
  BORDER-LEFT: black 1px solid
}

<div class="icons">div 1</br><a>some text</a></div>
<div class="icons">div 2</div>
<div class="icons">div 3</div>

在 jsfiddle 中，这个</br>标签似乎无效。有没有有效和/或更好的方法来实现这一目标？

http://jsfiddle.net/kp950/mum68pwv/

Answer 1

只需应用于display: block您的文本元素。

a { display: block; }

将强制每个元素消耗容器的全部可用宽度，并将后续元素消耗到下一行。

http://jsfiddle.net/mum68pwv/4/

Answer 2

由于换行语法错误，您在 jsfiddle 中抛出错误。

你在</br>应该使用的时候使用<br/>

2020/HTML5 编辑

您不再需要在 HTML5 中使用自关闭标签（尽管浏览器仍然可以处理它们），您可以简单地使用<br>.