CSS：显示显示：内显示块元素：行内元素

此代码我想要做什么：abc下次呈现时至defCSS：显示显示：内显示块元素：行内元素

<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

我该怎么办呢？谢谢。

来源

2012-02-13 spraff

你尝试'显示：直列block'您'div'？不确定你想要达到的目标。 – Zeta 2012-02-13 13:57:27

写在你的CSS：

div { 
    display: inline-block; 
    *display:inline;/*for IE7*/ 
    *zoom:1;/*for IE7*/ 
}

来源

2012-02-13 14:02:31 sandeep

-1

你可以做一个简单的

<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）已经更新，以反映新的问题。

来源

2012-02-13 13:57:57 ramsesoriginal

我更新了答案以反映问题的变化。对于谁投降，谁可以为此付出沉重的代价？ – 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

-1

为什么不只是使用span标签而不是p标签？因为p标签将变更为新的生产线

来源

2012-02-13 13:59:06 Idiot

您可以使用类：

<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>

来源

2012-02-13 14:00:32

CSS：显示显示：内显示块元素：行内元素

回答

相关问题