Html 多行跨度行为元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2410135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiline span-behaving elements
提问by alemjerus
I want to display a list of complex, but fixed-size multiline elements, assuming that they will wrap the page line when line end is reached, making them appear by nin each row, when
ndepends on page width. Something like:
我想显示一个复杂但固定大小的多行元素列表，假设它们将在到达行尾时包裹页面行，使它们出现n在每行中，具体
n取决于页面宽度。就像是：
Mary had Mary had Mary had
a little a little a little
LAMB LAMP WHISKEY
Mary had
a little
TOO MUCH
How should I do that?
我该怎么做？
回答by T.J. Crowder
inline-blockspans should do it:
inline-block跨度应该这样做：
body {
font-family: sans-serif;
}
#container span {
display: inline-block;
width: 5em;
border: 1px solid black;
}<div id='container'>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
</div>
</body>
</html>回答by Andy E
Use a combination of display: block;float:left;and your desired widthand height.
使用display: block;float:left;您想要的width和的组合和height。
span {
display: block;
float: left;
height: 100px;
width: 100px;
}
