Css 响应性浮动问题

我正在开发一个响应性强的网站，从每行三栏、两栏、最后一栏发展到一栏

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

---

解决这个问题最有效的方法是什么？

我不完全确定，如果这是你想要的，请看一看^^

---

你能为它做一个预测吗？或者显示一些代码？您需要使用媒体查询根据屏幕大小更改列的宽度%。这是上的一个示例。添加clear类并不理想，因为每行的列数取决于屏幕大小。另一个选项是通过确保所有列都与最高列一样高来使用最小高度。问题在于，高度会根据屏幕大小不断变化。

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