内联块 css
[英]inline-block css
问题描述
我希望多行的文本像单个文本块一样环绕，例如下面的“Source”和“DEC”字段，而不使用表格。
我想我应该能够使用 inline-block 来让它工作，但没有成功。
下面是我正在使用的简单 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>
3 个解决方案
解决方案1
0 2011-05-02 12:32:39
你几乎拥有它，试试这个：
.tt { color: #7777cc; width:85px; }
.cc { display:inline-block;vertical-align:top;width:200px }
您必须选择适合您的宽度。
解决方案2
0 已采纳 2011-05-02 12:33:38
你应该只使用浮点数。
.expandable { overflow:hidden; } /* Clears floats */
.tt { float:left; width:85px; }
.cc { float:left; }
解决方案3
0 2011-05-02 12:44:02
首先，我建议您使用定义列表的语义。 所以而不是
<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:blockandmargin-left:95pxon the "Neutron energy was changed by..."
另一个提示：找出你可能在左列中的最长单词，然后在em单元中设置这些元素的大小以适应这个最长的单词。 在大多数情况下和跨浏览器，您将获得比使用像素更好的结果。
CSS和显示：内联块
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.