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

回答

相关问题