内联块 css
[英]inline-block css
问题描述
I want texts with more than one line to wrap around like a single block of text, like for "Source" & "DEC" fields below, without using tables.
我希望多行的文本像单个文本块一样环绕，例如下面的“Source”和“DEC”字段，而不使用表格。
I guess I should be able to use inline-block to get this to work, but am not been successful.
我想我应该能够使用 inline-block 来让它工作，但没有成功。
Below is the simple html I'm working with:下面是我正在使用的简单 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
You almost have it, try this:你几乎拥有它，试试这个：
.tt { color: #7777cc; width:85px; }
.cc { display:inline-block;vertical-align:top;width:200px }
You will have to pick a width that works for you.您必须选择适合您的宽度。
Demo: http://jsfiddle.net/Madmartigan/FPtAS/演示： http://jsfiddle.net/Madmartigan/FPtAS/
解决方案2
0 已采纳 2011-05-02 12:33:38
You should just use floats.你应该只使用浮点数。
.expandable { overflow:hidden; } /* Clears floats */
.tt { float:left; width:85px; }
.cc { float:left; }
解决方案3
0 2011-05-02 12:44:02
First, I'd like to suggest that you use the semantics of a definition list.首先，我建议您使用定义列表的语义。 So instead of所以而不是
<div class="expandable">
<span class="tt">Source</span>
<span class="cc">Neutron energy was varied by...</span>
</div>
I would write我会写
<dl class="expandable">
<dt>Source</dt>
<dd>Neutron energy was varied by...</dd>
</dl>
But to answer you question:但要回答你的问题：
-
float:leftandclear:boththe "Source"float:left和clear:both“来源” -
display:blockandmargin-left:95pxon the "Neutron energy was varied by..."display:blockandmargin-left:95pxon the "Neutron energy was changed by..."
Another tip: figure out the longest word you might have in the left column and then set the size of these elements in the em unit to fit this longest word.另一个提示：找出你可能在左列中的最长单词，然后在em单元中设置这些元素的大小以适应这个最长的单词。 In most cases and across browsers you'll get better results than with pixels.在大多数情况下和跨浏览器，您将获得比使用像素更好的结果。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.