inline-block css

我想要多行文本像文本的單個塊一樣環繞，就像下面的「Source」&「DEC」字段一樣，不需要使用表格。inline-block css

enter image description here 我想我應該可以使用內聯塊來獲得這個工作，但沒有成功。

下面是簡單的HTML我的工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head id="head"> 
    <title></title> 
    <style type="text/css"> 
     .tt { color: #7777cc; width:85px; } 
     .cc { display: inline-block; } 
</style> 
</head> 
<body> 
    <div class="g1"> 
     <div class="expandable"> 
      <span class="tt">Source </span><span class="cc">Neutron energy was varied by changing the 
       emission angle to the deuteron beam. The activities of the "2"3"7U and "2"3"1Th 
       residual nuclei were measured by a Ge(Li) and a HP Ge gamma-spectrometer, respectively.</span> 
     </div> 
    </div> 
</body> 
</html>

來源

2011-05-02 itsbalur

什麼不起作用？ – 2011-05-02 12:29:28

@Pekka：我想讓類「cc」下的文本與「Source」同一行開始。當它包裹時，它應該包裹在自身之下，而不是包裝在「來源」文本下 – itsbalur 2011-05-02 12:31:50

對我來說，這看起來真像一張桌子。一張桌子有什麼問題 - 或者至少是一個定義列表？ – RoToRa 2011-05-02 12:33:58

你應該只使用浮動。

.expandable { overflow:hidden; } /* Clears floats */ 
.tt { float:left; width:85px; } 
.cc { float:left; }

來源

2011-05-02 12:33:38 Seth

漂浮不斷被濫用和誤解，在這種情況下不需要它。這是一個可疑的解決方案。 – 2011-05-02 12:36:04

完全不同意你的看法。它需要更多的代碼來完成相同的目標。如果它有效，那麼它就可以工作，那應該是這樣的。代碼越少代碼越好。 – Seth 2011-05-02 12:37:31

沒錯，這工作正常。我想我總是喜歡只要有可能就不需要浮動的解決方案 - 以後總是會讓人頭疼。然而，「這將需要更多的代碼來實現相同的目標」是不正確的。對不起Seth，並不意味着sn。。 – 2011-05-02 12:45:44

你幾乎有它，試試這個：

.tt { color: #7777cc; width:85px; } 
    .cc { display:inline-block;vertical-align:top;width:200px }

你必須挑選一個適合您的寬度。

演示：http://jsfiddle.net/Madmartigan/FPtAS/

來源

2011-05-02 12:32:39

太棒了！非常感謝。設置寬度，做詭計！ – itsbalur 2011-05-02 12:45:49

首先，我想建議您使用定義列表的語義。因此，而不是

<div class="expandable"> 
    <span class="tt">Source</span> 
    <span class="cc">Neutron energy was varied by...</span> 
</div>

我會寫

<dl class="expandable"> 
    <dt>Source</dt> 
    <dd>Neutron energy was varied by...</dd> 
</dl>

但是，爲了回答你的問題：

float:left和clear:both 「源」上的「中子能量
display:block和margin-left:95px被改變...「

另一個提示：找出你可能在左列中最長的單詞，然後在em單元中設置這些單元的大小以適應這個最長的單詞。在大多數情況下和跨瀏覽器，你會得到比像素更好的結果。

來源

2011-05-02 12:44:02 Mushimo

inline-block css

回答

相關問題