响应行的div

我想创建一个将跨越屏幕宽度的div行。该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保持在同一高度？

来源

2015-10-20 John

你需要在你的宽度后加一个分号！ – Aaron

@Aaron - 这应该工作！ –

也许您正在寻找这样的：

.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

来源

2015-10-20 12:23:43 Lahori

这部分工作，但是当屏幕尺寸缩小时，长文本会被隐藏。我猜这是因为溢出：隐藏。我需要所有的文字仍然可见。 – John

你是对的。你将不得不删除溢出：隐藏。如果你想固定高度，那么你将不得不对文本长度保持谨慎。 – Lahori

一旦问题解决，您应该接受答案 – Lahori

你写

width: 100% height:150px;

，但它应该是

width: 100%; height:150px;

同样适用于其他OCCURENCES

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

可以使用的在垂直对齐：顶部为更好的视觉外观： https://jsfiddle.net/9deLmbps/2/

来源

2015-10-20 12:02:20

在您的示例中将文本缩小为手机大小时，文本出现在框外。 – John

响应行的div

回答

相关问题