Div在響應式設計中堆疊

我正在創建一個具有固定標題和側邊欄導航的響應式儀表板。我想創建如下所示的模板，但我有與DIV堆積問題：Div在響應式設計中堆疊

相反，我只能讓他們棧這樣的形象在這裏：

我有一個圍繞具有以下風格的div的包裝：

width: 100%; 
padding: 15px;

divs本身被包裹在一個容器以下樣式：

display: inline-block; 
width: 50%; 
padding: 15px; 
float: left; 
vertical-align: top;

顯然，垂直對齊：頂部是應該解決這個問題，但我一直沒能得到黃格，以正確的位置。任何想法？

來源

2017-08-08 user3857046

你能提供完整的代碼（html和css部分）jsfiddle嗎？您是否打算使用Bootstrap –

我投票結束這個問題作爲題外話題，因爲這是一個經常被問到的問題，通過在SO或Google上搜索「石匠」解決方案或https：//masonry.desandro .COM /。 – Rob

可能的重複[如何浮動兩列中的文章？]（https://stackoverflow.com/questions/22817038/how-do-i-float-articles-in-two-columns） –

您可以通過Javascript Masonry Grid Layout來實現。

砌體是一個JavaScript網格佈局庫。它的工作原理是根據可用的垂直空間將元素放置在最佳位置，有點像鑲嵌在牆上的石匠。您可能已經在整個互聯網上看到了它的使用。

採用砌體圖書館，它作爲這個簡單。

<div class="grid"> 
    <div class="grid-item">...</div> 
    <div class="grid-item">...</div> 
    <div class="grid-item">...</div> 
</div>

的Jquery：

$('.grid').masonry({ 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: 200 
});

來源

2017-08-08 15:12:45 gudboisgn

-1

最簡單的方法是將黃色和藍色框與另一個div包裹起來。它工作除非你有媒體查詢更改佈局很多。另一件事是與colums一起使用flexbox。

來源

2017-08-08 15:10:55

請添加代碼而不是提供建議。 – Shiladitya

.wrapper{ 
 
width: 100%; 
 
padding: 15px; 
 
height:100%; 
 
} 
 

 
.floating_div{ 
 
    margin:10px; 
 
    float:left; 
 
    width: 45%; 
 
    height:300px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 

 
.m-t{ 
 
    margin-top:15px; 
 
} 
 

 
.blue_bg{ 
 
    background:blue; 
 
} 
 

 
.green_bg{ 
 
    background:green; 
 
} 
 

 
.yellow_bg{ 
 
    background:yellow; 
 
} 
 

 
.floating_div .inner_div{ 
 
    height:150px; 
 
}

<div class="wrapper"> 
 
    <div class="floating_div"> 
 
    <div class="inner_div blue_bg">Inner Div 1</div> 
 
    <div class="inner_div yellow_bg m-t"> Inner DIv 2</div> 
 
    </div> 
 
    <div class="floating_div green_bg "> 
 
    Left Div 2 
 
    </div> 
 
</div>

這是你正在尋找的一樣嗎？

這裏是JSFiddle

希望這有助於。

來源

2017-08-08 15:12:52

這應該爲你做它：

https://jsfiddle.net/hncuyy6o/1/

`<div class="wrapper"> 
    <div class="hai"> 
    <div class="one"></div>  
    <div class="three"></div> 
    </div> 
    <div class="two"></div> 
</div>`

CSS：

.wrapper{ 

width: 100%; 
padding: 15px; 
} 

.hai{ 
    display: inline-block; 
} 
.one{ 
    vertical-align: top; 
    width: 200px; 
    height: 300px; 
    background-color: blue; 
    display: inline-block; 
} 

.two{ 
    vertical-align: top; 
    width: 200px; 
    height: 400px; 
    background-color: red; 
    display: inline-block; 
} 

.three{ 
    width: 200px; 
    height: 300px; 
    background-color: yellow; 
    display: block; 
    position: absolute; 
}

希望有所幫助。

來源

2017-08-08 15:14:33

這不是，我的壞。給我第二個 –

https://jsfiddle.net/hncuyy6o/1/試試 –

我已經做了:) –

Div在響應式設計中堆疊

回答

相關問題