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会更改高度。如果有更多文本，我怎样才能确保每个div保持相同的高度？

Answer 1

你写过

width: 100% height:150px;

但它应该是

width: 100%; height:150px;

同样适用于其他事件

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

您可以使用 vertical-align：top 来获得更好的视觉效果： https://jsfiddle.net/9deLmbps/2/

Answer 2

也许你正在寻找这个：

.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

响应的div行

2 个答案: