如何使刀片佈局

-1

我想用「刀」如下，以使應用程序佈局：如何使刀片佈局

刀片高度將永遠是100VH。

刀片寬度將是可變的。

刀片將被添加和刪除js，從一開始，然後添加一個接一個。寬度用完後，左側應滾動到屏幕外。

這方面的一個示例是當前的Azure門戶。每次單擊某個項目時，都會顯示一個新刀片，其中包含有關該項目的更多特定數據。

但我不知道如何開始使用這個。我能想到的最接近的就是使用自舉網格系統，但寬度不一定要與那裏使用的網格系統相匹配。我甚至不知道「刀片」是否是正確的術語，但這正是Azure團隊所使用的。

<div style="height: 100vh; background: greenyellow; width: 200px"></div> 
<div style="height: 100vh; background: pink; width: 200px"></div>

上面應該是並排的，左邊是greenyellow，右邊是粉紅色。粉紅色以上的綠色而不是綠色。

以下是Azure Portal的屏幕截圖。它有3個「葉片」

來源

2016-10-19 Greg Gum

請提供您嘗試代碼 –

好吧，我會看看我能拿出的東西。 –

如果您的意思是這個http://epvpimg.com/41P0f我會在網格系統中呼叫身份證 – DestinatioN

我找到了Flexbox的：

<style> 
    .flex-container { 
     padding: 0; 
     margin: 0; 
     list-style: none; 
     display: flex; 
    } 

    .flex-item { 
     background: tomato; 
     padding: 5px; 
     width: 200px; 
     height: 100vh; 
     margin: 5px; 
     line-height: 150px; 
     color: white; 
     font-weight: bold; 
     font-size: 3em; 
     text-align: center; 
    } 
</style> 
<ul class="flex-container"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
</ul>

CSS Tricks on the Flexbox

來源

2016-10-19 07:03:25

如何使刀片佈局

回答

相關問題