Question

我会有3个并排的图标，当窗口缩小时会向左浮动。在每个图标下，我想添加一些文字。我可以得到它，如下所示。

＆＃13;

.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
}

＆＃13;

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

＆＃13;

在jsfiddle中，此</br>标记似乎无效。是否有一种有效和/或更好的方法来实现这一目标？

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

Answer 1

由于您的换行符语法错误，您在jsfiddle中收到错误。

当您使用</br>

时，您正在使用<br/>

Answer 2

只需将display: block应用于文字元素即可。

a { display: block; }

将强制每个元素使用容器的完整可用宽度，并将后续元素用于下一行。

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

Answer 3

而不是</br>使用<br>或<br />

<br />是有效标记，而</br>则不是。

使用：

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

P.S。

<a>是锚标记，不是向网页添加小元素的好选择。而是使用更有效的<span>标记。

Answer 4

您的<br>代码

中存在语法错误

所以这个 <div class="icons">div 1</br><a>some text</a></div>

应该成为 <div class="icons">div 1<br><a>some text</a></div>

在div中创建换行符

4 个答案: