如何在一個div中浮動跨度？

我想了解如何在沒有Bootstrap的幫助下實際使用CSS。如何在一個div中浮動跨度？

我有以下幾點：（在這裏可以查看：http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview）

<div class="block"> 
    <span class="pull-left">George</span> 
    <span class="pull-right">$23.20</span> 
</div> 

<div class="block"> 
    <span class="pull-left">Carl</span> 
    <span class="pull-right">$4.81</span> 
</div> 

<div class="block"> 
    <span class="pull-left">Steve</span> 
    <span class="pull-right">$0.34</span> 
</div>

和CSS ...

.pull-left { 
    float: left; 
} 

.pull-right { 
    float: right; 
} 

.block { 
    display: block; /* since, div, I don't need this right ?*/ 
    background-color: #87CEEB; 
    width: 100%; 
}

如果我用的是引導，我能達到預期的效果，通過把我的HTML在container股利，而不是使用我的自定義類block，添加類btn和btn-block。

我想讓名稱在左邊垂直對齊，價格在右邊垂直對齊。我錯過了什麼？

有點像：

George          $23.20 
Carl          $4.81 
Steve          $0.34

請不要提桌，就像我說的，我可以用引導和包裝上面的HTML中div.container，然後用button.btn.btn-block而不是我div.block來實現精確同樣的效果。謝謝。

更新1：

OK，沒想到那裏是超過也許一個或兩個解決方案，但有相當多的。有人可以解釋每種解決方案的優缺點嗎？我真的很茫然。

溶液＃1：

添加new div element：

<div class="block"> 
    <span class="pull-left">George</span> 
    <span class="pull-right">$23.20</span> 
    <div style='clear:both'></div> 
</div>

溶液＃2：

通過添加clear:both; overflow:auto;到block類thgaskel

解決方案＃3：

這似乎創建塊之間的利潤率。

Changedisplay:block到display:inline-block爲block類。

溶液＃4：

Addfloat:left到block類。

解決方案＃5：

發現了這一個，而瞎搞。創建一個新的選擇：

.block:after { 
    content: ":" /* <--- at a complete loss why this works */ 
}

解決方案＃6：

意識到這個問題從閱讀this page。

.block:after { 
    content:""; 
    display: table; 
    clear: both; 
}

我感覺相當不知所措，不知道該選哪個。謝謝。

來源

2013-07-30 JP Richardson

相反的display: block;，使用下面的CSS

.block { 
display: inline-block; //change like this 
background-color: #87CEEB; 
width: 100%; 
}

更新： 由於差距distrubing，更好地利用

.block { 
    display: block; 
    float: left; 
    background-color: #87CEEB; 
    width: 100%; 
}

Actaully inline-block的傾向於離開它可以是空間在許多方面阻止。

即使這個解決您的問題，檢查jsfiddle

來源

2013-07-30 04:29:42 Praveen

但是'BTN-block'在引導有一個'顯示：塊'？ –

這有效，但我不明白爲什麼這會在塊之間放置一個邊距，而其他解決方案不會？ –

@Jichaichadson我不認爲應用CSS的優點和缺點。我只會說，它不應該影響你的HTML中的其他樣式。 – Praveen

你在你的方法結束時，你唯一需要做的，使這項工作是在將其應用於跨度之後清除浮體。

看一看如何clear作品HTML/CSS：http://www.w3schools.com/cssref/pr_class_clear.asp

你的HTML應該是這樣的：

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    </head> 

    <body> 
    <div class="block"> 
     <span class="pull-left">George</span> 
     <span class="pull-right">$23.20</span> 
     <div style='clear:both'></div> 
    </div> 

    <div class="block"> 
    <span class="pull-left">Carl</span> 
    <span class="pull-right">$4.81</span> 
    <div style='clear:both'></div> 
    </div> 

    <div class="block"> 
    <span class="pull-left">Steve</span> 
    <span class="pull-right">$0.34</span> 
    <div style='clear:both'></div> 
    </div> 


    </body> 

</html>

來源

2013-07-30 04:29:45 JanR

哈哈好吧，注意:) – JanR

你也可以申請'clear：both; overflow：auto;'到'.block'類。 – thgaskell

Jeeze，sooo似乎有效的許多解決方案...我真的不知道每個人的優點/缺點。 –

添加float:left;到.block類，因爲其子漂浮這就是爲什麼你需要浮動其父div來獲得完整的寬度

.block { 
    display: block; /* since, div, I don't need this right ?*/ 
    background-color: #87CEEB; 
    width: 100%; 
    float:left; 
}

來源

2013-07-30 04:33:10 Hushme

好吧，你會看到添加標籤後的區別.. :) – zzlalani

如何在一個div中浮動跨度？

回答

相關問題