具有相同左属性的Css堆栈元素

Question

我试图堆叠具有相同左边属性的元素：

样本：

＆＃13;

＆＃13;

var genRandomLeft = function(){
    return (Math.random() * 100) + 1;
}

var generateDivs = function(count){
    var docElem = document.getElementById("container");
    var divs = "";
    for (var i=0; i<count; i++){
        divs += "<div style=\"left:"+genRandomLeft()+"%;\" class=\"marker\"></div>";
    }
    docElem.innerHTML = divs;
};

generateDivs(25);

＆＃13;

.marker{
    position: relative;
    width:35px;
    border:solid 1px;
    height:10px;
}
.container{
  width:100%;
  margin:0 auto;
}

＆＃13;

<div id="container">
</div>

＆＃13;

＆＃13;

＆＃13;

我想在CSS中添加类似float：top的​​内容，以便堆叠共享水平空间的项目。例如这样的事情：

Answer 1

你在display:inline-block;的css中寻找.marker{}之类的内容吗？

它没有考虑重叠，但它将它们放在同一水平面上