在一個較大的div內垂直移動div

我正在製作一個動畫，其中包含一個四個div在一個較大的div內的集合。這四個div太大而不適合一個div，所以我想能夠指定更大div應該開始的位置。例如，在這裏我有四個盒子裏面的div。從上到下，這些盒子是綠色，紫色，粉紅色和藍色的（因爲它被切斷，所以你不能看到當前jsfiddle中的藍色）。我希望較大的fulldisplay div的BOTTOM與藍色方塊的MIDDLE對齊，並且其他所有內容都適合帽子上方，直到它在div頂部被切斷爲止。最終，我將實現一個定製的滾動按鈕（因爲我不希望它看起來像溢出：滾動一個），但現在我只是試圖讓CSS以我想要的方式顯示內部div。在一個較大的div內垂直移動div

JS FIDDLE：http://jsfiddle.net/o33gw35w/

CSS：

body {padding: 0; margin: 0; height: 100%; overflow: hidden; font-family: Helvetica;} 

.nameblock { 
height:10%; 
width: 30%; 
position: absolute; 
background-color: yellow; 
} 

.fulldisplay { 
height:90%; 
width: 30%; 
position: absolute; 
overflow: hidden ; 
} 


.spacer1 { 
height:40%; 
position: relative; 
background-color: green; 
} 


.spacer2{ 
height:40%; 
position: relative; 
background-color: purple; 
} 


.spacer3 { 
height:40%; 
position: relative; 
background-color: pink; 
} 


.spacer4{ 
height:40%; 
position: relative; 
background-color: blue; 
}

HTML：

<div class="nameblock"></div><br/> 

<div class="fulldisplay"> 
    <div class="spacer1"> 
    </div> 
    <div class="spacer2"> 
    </div> 
    <div class="spacer3"></div> 
    <div class="spacer4"></div> 
</div> 

</body>

來源

2015-03-02 garson

道歉，如果我有問題錯了，因爲我不太知道你正在嘗試做的，但如果你想有一種動態排序的方式，你可以使用CSS flexbox來做到這一點。您可能需要調整類以使其具有正確的寬度和高度（例如，寬度：100％; 高度：150px;）並將flex容器定義爲類似於以下片段。

.fullconversation { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    width: 30%; 
    display: flex; 
    flex-direction: row; 
    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
}

然後

.spacer4{ 
width: 100%; 
height: 150px; 
position: relative; 
background-color: blue; 
order: -1; 
}

有關Flexbox的更多信息，請參閱以下網址或隨意問關於Flexbox的或CSS的任何問題。希望這可以幫助。

https://css-tricks.com/almanac/properties/o/order/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

***********更新************

如果更改spacer1相對於高度10％，那麼你會看到底部可見的藍色框。請注意，值10％只是一個示例，只要內部s的高度總大小不會超過100％，藍色框就會顯示出來。

.spacer1 { 
height:10%; 
position: relative; 
background-color: green; 
}

另外，如果你想查看所有的divs無論大小，你可以設置溢出到隱藏以外。

來源

2015-03-02 06:04:26 workaholic

感謝您的回覆！這不完全是。我想要保持順序不變，但是如果有太多不合適的東西，請更改哪些div colorbox出現在較大的div中。我希望它適合，以便一半的藍色可見，並且任何適合的都在上面。就好像你在側面有一個滾動條，並滾動，這樣一半的藍色可見 - 我只是不想滾動條。我希望這是它看起來的樣子。（我這樣做是因爲我最終想實現一個單獨的定製滾動條） – garson 2015-03-02 13:55:08

嗯。只有藍色div不可見的原因是其他div的大小已超過較大div（class = fullconversation）的大小。如果您將spacer1的高度設置爲10％，那麼您會在底部看到藍色部分。請參閱最新的答案。 – workaholic 2015-03-03 05:06:12

請讓我知道這是否有幫助。 – workaholic 2015-04-07 02:19:14

在一個較大的div內垂直移動div

回答

相關問題