在div內創建一個換行符

我將並排放置3個圖標，當窗口縮小時會左移。在每個圖標下方，我想添加一些文字。我可以很好地得到它，如下所示。在div內創建一個換行符

.icons { 
 
\t 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/

來源

2015-12-08 spex5

爲什麼你首先使用錨（''）標籤？如果需要，你可以使用'span'。 '
'是正確的語法，而不是'
' –

這可能是因爲你所有的CSS都是CAPS。我知道這聽起來很愚蠢，但可能就是這樣。 – durbnpoisn

@durbnpoisn號CSS不區分大小寫。如果類名和選擇器之間存在不匹配（因爲類名區分大小寫），那麼你會有一點，但OP的CSS是正確的。 –

只是適用display: block到你的文本元素。

a { display: block; }

的將迫使各元件消耗容器的全部可用寬度，和隨後的元件到下一行。

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

來源

2015-12-08 20:27:39

你有一個語法錯誤在你<br>標籤

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

應該成爲 <div class="icons">div 1<br><a>some text</a></div>

來源

2015-12-08 20:28:00

你得到的的jsfiddle引發的錯誤是由於您的換行符語法錯誤。

您使用</br>時，你應該使用<br/>

來源

2015-12-08 20:28:17

代替</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>

附：

<a>是錨標籤，它不是一個很好的選擇添加一些元素到您的網頁。而是使用<span>標籤，這將更有效。

來源

2015-12-08 20:32:49

在div內創建一個換行符

回答

相關問題