響應行的div

Question

我想創建一個將跨越屏幕寬度的div行。該div必須具有固定的高度和寬度，並且div將放到另一行，屏幕寬度已經填滿。我也試圖應用媒體查詢，以便div在較小的屏幕上跨越整個寬度。

媒體查詢：

@media screen and (max-width:400px) { 
    .test { 
     display:inline-block; 
     width: 100% height:150px; 
     padding:10px; 
    } 
} 
@media screen and (min-width:599px) { 
    .test { 
     display:inline-block; 
     width: 30% height:150px; 
     padding:10px; 
    } 
} 
@media screen and (min-width:600px) { 
    .test { 
     display:inline-block; 
     width: 20% height:150px; 
     padding:10px; 
    } 
} 

這是我到目前爲止有：https://jsfiddle.net/9deLmbps/

正如你所看到的變化DIV高度時，在它裏面的多行文本。如果有更多文本，我怎樣才能確保每個div保持在同一高度？

Answer 1

也許您正在尋找這樣的：

.test{ 
    background-color: skyblue; 
    display:inline-block; 
    width: 150px; 
    height:100px; 
    overflow:hidden; 
} 

我更新了您的視覺體驗小提琴。 jsfiddle:fixed width and height and divs will drop to another line the screen width has already been filled

Answer 2

你寫

width: 100% height:150px; 

，但它應該是

width: 100%; height:150px; 

同樣適用於其他OCCURENCES

我更新您的提琴：https://jsfiddle.net/9deLmbps/1/

可以使用的在垂直對齊：頂部爲更好的視覺外觀： https://jsfiddle.net/9deLmbps/2/