在div中水平渲染两个div

Question

我有一个父div有两个子div，它们处于水平状态，现在我想添加其他div，以便分页。

这是代码。

<div id="parent">
     <div id="left"></div>
      <div id="right"></div>
</div>

在这里，如果我将其他div添加到'parent'，它最后会追加，但不应该显示，并且应该出现分页。 使用花车，我正在制作div的水平。我必须只显示两个div，然后应该分页。

Answer 1

这只是 DEMO ：

的 HTML： 的

<div id="parent">
  <div id="wrapper">
    <div id="left">window 1</div>
    <div id="right">window 2</div>
  </div>
</div>
<div id="paginator"><span id="prev">Previous</span><span id="next">Next</span></div>

的 CSS： 的

#parent {
    width: 850px;
    overflow: hidden;
    padding: 10px;
    height: 320px;
    border: 1px solid #f00
}
#wrapper div {
    width: 400px;
    border: 1px solid #ccc;
    height: 300px;
    display:inline-block;
    margin: 10px
}
#paginator {
    margin: 10px;
    display: block
}
#paginator span {
    width: 30px;
    padding: 5px;
    margin: 10px;
    background: #1f1f1f;
    color: #fff;
}

的 JQUERY： 的

$(function() {
    $('#next').click(function() {
        $('#wrapper').append($('<div>window 3</div><div>window 4</div>')); // you can add div using other way
        $('#wrapper').animate({
            marginLeft: '-=860px'
        },
        500, 'linear');
    });
    $('#prev').click(function() {
        $('#wrapper').animate({
            marginLeft: '+=860px'
        },
        500, 'linear');
    });
});

Answer 2

我不确定我理解你的问题，但我会试一试......

<div id="parent">
     <div id="left"></div>
     <div id="right"></div>
</div>
<div style="clear:both"></div>

<div id="pagination"></div>

......这是你的意思吗？