css - 在行中将文本包装成两个跨度

Question

我在一个 div 中有两个 span

<div>
  <span class="span1">  text 1 text1 <span>
  <span class="span2"> text2 is a long text text2 is a long text text2 is a long text <span>
<div>

现在我希望 span2 中的文本从 span2 开始的地方环绕，而不是在 span 1 本身

所以不应该是这样

   text1 text1 text2 is a long text 
   text2 is a long text text2 is a long text 

我想要它

   text1 text2 is a long text 
   text1 text2 is a long text text2 is a long text 

我怎样才能做到这一点。我尝试过使用 display:block 属性设置 span，但它似乎在 IE 上不起作用。

我也不想有两个单独的 div，因为我希望两个跨度上的背景颜色具有相同的高度，并且由于 span2 的高度是可变的，所以我不能在两个跨度上的背景颜色高度上保持一致。

谢谢，

Answer 1

我认为 OP 试图传达的只是他/她希望将每个跨度呈现在一个新行上。如果我是正确的，那么以下将起作用。

关闭您的 span 和 div 标签:

<div>
    <span class="span1">span 1 content </span>
    <span class="span2">span 2 content</span>
</div>

制作这些跨度 display:block

.span1, .span2 {display:block;} 

http://jsfiddle.net/waMM2/

---

FWIW 除非您需要跨度具有不同的类名，否则最好给它们相同的名称。例如:

<div>
    <span class="block">span 1 content </span>
    <span class="block">span 2 content</span>
</div>

CSS: .block {display:block;}

或者定位特定 div 的所有子 span 可能是合适的:

<div class="blockspans">
    <span>span 1 content</span>
    <span>span 2 content</span>
</div>

CSS:.blockspans span {display:block;}