Question

这个jfiddle运行正常，但是它会垂直加载内容，我希望能够将每个新div加载到另一个的旁边，以创建一个长的div水平列表。我怎样才能做到这一点？感谢

HTML

<div id="wrap">
<div id="content">

</div>
</div>


<button id="create" onclick="createDiv()">create</button>
<button id="create2" onclick="createDiv2()">create2</button>

CSS

#wrap{ height: 200px; position:relative; overflow-x:scroll;}
#content{height: 200px; position: absolute; bottom:0; left:0}
#child{height: 100%;width: 200px;background-color: #000;float:left;}

的javascript

function createDiv(){
$('#content').prepend('<div id="div" style="height: 100%;width: 200px;background-color: rgb(0,114,157);">div1</div>');
}

function createDiv2(){
$('#content').prepend('<div id="div2" style="height: 100%;width: 200px;background-color: #000;">div2</div>');
}

Answer 1

只需制作子元素inline-block而不是block。

UPDATED EXAMPLE HERE

#content > div {
    display: inline-block;
}

或者你可以float them too。

最好使用inline-block方法，因为您可以将white-space:nowrap添加到父元素，以防止元素换行到新行。

EXAMPLE HERE

javascript prepend将新div加载到另一个侧面

1 个答案: