css - 响应浮动问题

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%;
    }
}