Question

我正在开发一个响应式网站，我从三，二，最后到每行一列。

我遇到的问题是文本长度在列之间变化，这意味着某些列不适合，因此它们会被推下来。请注意，列是流动的，因此文本会根据屏幕大小变得越来越短。

哪种解决方法最有效？

Answer 1

我不完全确定，如果这是你想要的，但看一看http://jsfiddle.net/H5E35/1/ ^^

.container {
    width: 100%;
    margin: 0 auto;
    font-size: 0px; // fix, so there is no gap between the elements
    vertical-align:top;
}

.col {
    vertical-align:top;
    font-size: 14px;
    width: 33.33%; // is more precise than 33
    background-color: green;
    display: inline-block;
}

@media screen and (max-width: 1000px) {
    .col {
        width: 50%;
    }
}

@media screen and (max-width: 700px) {
    .col {
        width: 100%;
    }
}

响应性浮动问题

1 个答案: