Javascript 水平渲染一个div中的两个div

我有一个父div，它有两个位于水平方向的子div，现在我想添加其他div，以便分页

这是代码

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

在这里，如果我将其他div添加到“parent”中，它将最后追加，但不应显示，并且应该进行分页。

---

使用浮动，我将使div水平。我必须只显示两个div，然后分页应该会出现。

我不确定我是否理解您的问题，但我会尝试一下

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

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

---

。。。这就是你的意思吗？

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

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

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

---

。。。这就是你要做的吗？

这只是一个演示：

HTML:

JQUERY:

$（函数（）{
$（“#下一步”）。单击（函数（）{
$（'#wrapper'）。追加（$（'window 3window 4'）；//您可以使用其他方式添加div
$（“#包装器”）。设置动画({
边缘左侧：'-=860px'
},
500，‘线性’；
});
$（'#prev'）。单击（函数（）{
$（“#包装器”）。设置动画({
marginLeft:'+=860px'
},
500，‘线性’；
});
});

这只是一个演示：

HTML:

JQUERY:

$（函数（）{
$（“#下一步”）。单击（函数（）{
$（'#wrapper'）。追加（$（'window 3window 4'）；//您可以使用其他方式添加div
$（“#包装器”）。设置动画({
边缘左侧：'-=860px'
},
500，‘线性’；
});
$（'#prev'）。单击（函数（）{
$（“#包装器”）。设置动画({
marginLeft:'+=860px'
},
500，‘线性’；
});
});

请提供更多关于您试图实现的目标的数据。听起来，您很可能需要使用javascript来创建所需的效果，但如果没有更多信息，则很难给出准确的答案。请提供更多有关您试图实现的目标的数据。听起来，您很可能需要使用javascript来创建所需的效果，但如果没有更多信息，则很难给出准确的答案。@Bhaskar这只是一个示例。你必须根据需要修改它。@Bhaskar这只是一个例子。你必须根据需要修改它。

#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;
}

$(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');
    });
});