在div中呈現兩個div horizantally

Question

我有一個父div有兩個子div，它們在horizantal中，現在我想添加其他div以便分頁應該出現。

這是代碼。

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

在這裏，如果我添加其他股利'父'，它將最後追加，但不應該顯示和分頁應該來。 使用浮動，我使div的horizantal.I必須只顯示兩個div，之後，分頁應該來。

Answer 1

不知道我理解你的問題，但我給它一個鏡頭...

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

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

...這是你的意思做什麼？

Answer 2

這僅僅是一個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'); 
    }); 
});