CSS:显示显示:内显示块元素:行内元素
此代码我想要做什么:abc
下次呈现时至def
CSS:显示显示:内显示块元素:行内元素
<style type="text/css">
div {display: inline;}
</style>
<div>abc</div>
<div>def</div>
然而,这产生了问题:
<style type="text/css">
div {display: inline;}
</style>
<div>
<p>abc</p>
<p>def</p>
</div>
<div>
<p>ghi</p>
<p>jkl</p>
</div>
<div>
<p>mno</p>
<p>pqr</p>
</div>
因为p
还有display:inline
,所有单词都是垂直显示。 div内还有其他块级元素(例如ul
)可以考虑,并且可以任意多个div。我不想做p
等直列因为预期的效果是这样的:
abc ghi mno
def jkl pqr
我该怎么办呢?谢谢。
写在你的CSS:
div {
display: inline-block;
*display:inline;/*for IE7*/
*zoom:1;/*for IE7*/
}
你可以做一个简单的
<section id="floated">
<div>
<p>abc</p>
<p>def</p>
</div>
<div>
<p>ghi</p>
<p>jkl</p>
</div>
<div>
<p>mno</p>
<p>pqr</p>
</div>
</section>
,然后在CSS
#floated div {
display: inline-block;
width: 200px;
}
这仅仅是一个快速和肮脏的答案,有很多方法可以实现你所想做...
编辑
另一种可能性:
<div id="multicolumn">
<div>
<p>abc</p>
<p>def</p>
</div>
<div>
<p>ghi</p>
<p>jkl</p>
</div>
<div>
<p>mno</p>
<p>pqr</p>
</div>
</div>
和CSS:
#multicolumn {
-moz-column-width: 200px;
-webkit-column-width: 200px;
column-width: 200px;
}
就像我说的,有吨的可能性..
EDIT 2
你可以看到他们两个这里:http://jsfiddle.net/ramsesoriginal/VZEsA/
编辑3
感谢您的投票,没有任何评论。无论如何,这些例子(包括这里和jsfiddle)已经更新,以反映新的问题。
我更新了答案以反映问题的变化。对于谁投降,谁可以为此付出沉重的代价? – ramsesoriginal 2012-02-13 14:27:42
@ramsesorigianl;在你之前的回答中,你将float赋给了一个DIV,而不是这两个DIV,这是错误地使用float。 – sandeep 2012-02-13 15:55:56
在我以前的答案那里只有两个div。有两个div,一个必须漂浮,另一个将在一边。由于我切换到'display:inline-block',所以没有必要使用三个div – ramsesoriginal 2012-02-14 06:55:10
为什么不只是使用span标签而不是p标签? 因为p标签将变更为新的生产线
您可以使用类:
<style type="text/css">
.inl {display: inline;}
</style>
<div>
<p>abc</p>
<p class="inl">def</p>
</div>
<div>
<p>ghi</p>
<p>jkl</p>
</div>
你尝试'显示:直列block'您'div'?不确定你想要达到的目标。 – Zeta 2012-02-13 13:57:27