Question

有一些DIV和SPAN具有文本定义的宽度。我需要根据TOP / LEFT定义他们的确切位置。但是使用“内联块”选项是不可能的。

如何设置顶部/左侧的确切位置并保持文本的宽度定义宽度？

HTML

<div id="container" style="float: left; margin-right: 10px;">
    <span id="test1">aaa</span>
    <span id="test2">bbb</span>
    <span id="test3">ccc</span>
</div>
<div id="container" style="float: left;">
    <div id="test1">aaa</div>
    <div id="test2">bbb</div>
    <div id="test3">ccc</div>
</div>

CSS

#container {
    width:300px;
    height:300px;
    background-color: #efefef;
}
#test1{
    position: relative;
    top: 100px;
    left: 0px;
    display: inline-block;
}
#test2{
    position: relative;
    top: 0px;
    left: 0px;
    display: inline-block;
}
#test3{
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
}

Answer 1

将包装器position设置为relative

#container {
    position: relative;
    ...
}

然后将内部div position设置为absolute

#test1 {
    position: absolute;
    ...
}

...

定义具有定义宽度的DIV - 在DIV内

1 个答案: