僅顯示主div內的第一個div標籤

我有四個div標籤。其中之一是.main股利。其餘的都在.main和.sub類。我想要的是首先顯示.main中的第一個div標籤，其餘的將放置在第一個div標籤的右側，但主div標籤的overflow被隱藏，因此其他兩個div標籤不會僅顯示在第一個是可見的。我試圖用this code來實現這一點。我怎樣才能做到這一點？僅顯示主div內的第一個div標籤

.main { 
    width: 100%; 
    height: 500px; 
    background: red; 
    overflow: hidden; 
} 

.sub { 
    width: 100%; 
    height: 300px; 
    float: left; 
} 

.blue { background: lightblue; } 
.green { background: green; } 
.orange { background: orange; }

來源

2013-05-12 2619

給不同的'id'給他們，並把'顯示：none'在「綠色」和「橙色」？然後，如果你想要顯示它們，你可以用javascript來更改'style' – Sergio 2013-05-12 11:17:15

假設我已經正確理解你，你想看到所有三個sub的div，一個在左邊，兩個在右邊，問題是，你設置寬度爲100％，所以沒有空間讓他們漂浮在一起。

您需要設置它們的寬度，使它們不佔據容器的全部寬度，例如它們每個都可以寬50％。

您還需要在右側設置兩個div的高度，以便它們的總高度與左側的div相同，如果您希望它們排隊。

更新：

爲了讓這個只有左格是可見的最初，我認爲這是最好的，你周圍添加子div的一次像這樣的包裝DIV：

<div class="main"> 
    <div class="wrapper"> 
     <div class="sub blue"></div> 
     <div class="sub green"></div> 
     <div class="sub orange"></div> 
    </div>  
</div>

隨着寬度設置爲200％。

.wrapper { 
    width:200%; 
}

然後當你想要右手的div變得可見，你可以把它們通過重新包裝DIV滑動到屏幕上，可以通過轉換，相對位置，或邊距設置。

Updated fiddle example

來源

2013-05-12 12:29:53

是的，我想在左邊放置1個div，在右邊放置其他2個div，但所有div都應該佔據100％的寬度，並且只能看到第一個。然後我會有一個下一個按鈕。當用戶點擊下一個按鈕時，第一個div將向左移動並變爲不可見，第二個div將動畫並變爲可見。 – 2619 2013-05-12 12:33:25

更新了我的答案，以說明如何做到這一點。 – 2013-05-12 12:51:08

我不知道爲什麼，但我發現，如果你在這種情況下，有第一項下方空間料將不會工作。

所以讓子匹配的高度，然後它的工作：

.sub { 
    width: 100%; 
    height: 500px; 
    float: left; 
}

http://jsfiddle.net/Ex9EC/2/

大概這是完全錯誤的做法，但這樣等待別人誰知道，也許評論？

而且我覺得可能是一些關於外/ div容器的位置如何必須設置（以相對的，絕對的或固定的），這就是爲什麼我補充說，但它似乎沒有它的工作太：

http://jsfiddle.net/Ex9EC/3/

來源

2013-05-12 11:20:27 gordatron

僅顯示主div內的第一個div標籤

回答

相關問題