如何在中显示元素？[英]How to display a element inside a ? 本文翻译自  Harish Kurup  查看原文  2011-03-25  44378    html

My container element is a <span> and I want to display a <div> element inside it. How can I add a <div> inside a <span> without making the <div> display: inline;?

我的容器元素是,我想在其中显示一个

元素。如何在 中添加

而不进行

显示:inline;?

<span>
    <div>Content goes here</div>
</span>

3 个解决方案

#1

Change the span to display block? But it makes no sense at all, if you need a block inside, then replace the span with a div. Your document won't validate this way either and behavior in different browsers is kinda unpredictable...

将跨度更改为显示块?但它完全没有意义,如果你需要一个块,然后用div替换span。您的文档也不会以这种方式验证,并且不同浏览器中的行为有点不可预测......

#2

What I ended up doing when I first thought I needed this was changed the span to a div. But instead of leaving the div as a display:block (default) I specified the style to be display:inline-block, this allowed the block so the inner div could be used, but still allowed me to put more then one of the divs on the same line.

当我第一次想到我需要这个时,我最终做的就是将跨度改为div。但是不要把div作为显示器:block(默认)我指定了要显示的样式:inline-block,这允许块所以可以使用内部div,但仍允许我放置多个div之一在同一条线上。

<div style="display:inline-block">
  <div>context on top</div>
  <div>context on bottom</div>
</div>
<div style="display:inline-block">
  <div>context on top</div>
  <div>context on bottom</div>
</div>

This should put 2 blocks next to each other (with out the use of float) and inside of each block there should be 2 blocks one on top of each other. Also you can specify the width on the style to get it to look the way you want.

这应该将2个块彼此相邻(不使用浮动),并且每个块的内部应该有2个块,一个在彼此的顶部。您还可以指定样式的宽度,使其看起来像您想要的样子。

#3

According to given vague description:

根据给出的模糊描述:

.A {
  position: relative;
}
.B {
  position: absolute;
  top: 0;
  left: 0;
}

<span class="A">text<div class="B">div</div></span>