CSS對齊問題

Question

我想創建一個注冊過程，用戶必須在提供名稱和密碼之前接受TOS。

這是屏幕截圖，您將看到我遇到的問題：

http://screencast.com/t/3MF5LSIab（11秒）

當用戶在同意TOS之后單擊“下一步”時，該div滑出屏幕，但下一個div滑入第一個div下，並且當第一個div消失時，第二個潛水彈出到頂部。

編輯 -添加缺少的代碼

jQuery的：

$('#tandc_next').click(function(){
    $('#tandc').hide("slide", { direction: "left" }, 1000);
    $('#account_info').show("slide", { direction: "right" }, 1000);
});

兩個div的CSS：

background-color: #fff;
border: 1px solid #999;
color: #000;
padding: 8px;
margin-bottom: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

父容器具有以下內容：

.registration form > div {
    position: relative; }

html布局為：

div.registration
     form
        div#tandc
        div#account_info

如何使第二個div滑入以使每個div的頂部處於相同高度？

Answer 1

你應該試試

.registration form > div {
    position: absolute;
    top:0px;
   }

這樣，他們倆都將在其父母的頂部對齊。

編輯：問題是jQuery使用包裝器滑動，以克服這種影響，您必須將它們包裝在將要定位的外部div中。

可以這樣實現以下示例： http : //jsfiddle.net/HKsHy/

使用以下布局

div.registration
   form
      div
         div
      div
         div

並從上方添加css（具有絕對位置的css）

並使用以下jQuery

$(".registration form > div").has("#account_info").css("display","none");

$('#tandc_next').click(function() {
    $('#tandc').hide("slide", {
        direction: "left"
    }, 1000);
    $(".registration form > div").has("#account_info").css("display","block");
    $('#account_info').show("slide", {
        direction: "right"
    }, 1000);
});

必須執行第一行才能隱藏第二個div。 然后顯示回來。 在幻燈片中。

編輯2 ：

您甚至可以使用超時來獲得更清晰的表演效果。 像那樣：

function showSecond(){
    $(".registration form > div").has("#account_info").show();
    $('#account_info').show("slide", {
        direction: "right"
    }, 1000);   
}
$('#tandc_next').click(function() {
    $('#tandc').hide("slide", {
        direction: "left"
    }, 1000);
    setTimeout(showSecond,500);       

});

此處的示例： http : //jsfiddle.net/HKsHy/1/