响应浮动问题答案

【问题标题】：Responsive float issue响应浮动问题
【发布时间】：2013-11-07 22:12:04
【问题描述】：

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

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

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

【问题讨论】：

你可以为它创建一个jsFiddle 吗？或者给我们看一些代码？
您需要使用媒体查询根据屏幕大小更改列的宽度百分比。
这是JSFiddle 上的一个示例。添加一个清晰的类并不理想，因为每行的列数取决于屏幕大小。另一种选择是通过确保所有列都与最高列一样高来使用最小高度。问题是高度会根据屏幕尺寸不断变化。

标签： css responsive-design css-float

【解决方案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%;
    }
}

【讨论】：