浮点隐藏溢出和最小宽度在火狐中

Question

我正在研究一个简单的响应式布局，其中我有一个列表，其中包含一个小的浮动左侧图像和有关侧面图像的信息。在全宽上，我想在与图像相同的行上显示信息。在小宽度上，我需要文本显示在图像下方。我在信息容器中使用最小宽度以及隐藏的溢出，因此它不会换行。这适用于chrome，但不适用于火狐浏览器。有什么解决方法吗？谢谢。

法典

<div class="wrapper">
    <ul>
        <li>
            <div class="image">
            </div>
            <div class="info">
            </div>
            <div class="clear"></div>
        </li>
        <li>
            <div class="image">
            </div>
            <div class="info">
            </div>
        </li>
        <li>
            <div class="image">
            </div>
            <div class="info">
            </div>
        </li>
    </ul>
</div>

.css

.wrapper {width:100%}
.image {height:50px;width:50px;margin:10px;border:1px solid;float:left}
.info {min-width:200px;overflow:hidden}
.clear {clear:both}

小提琴http://jsfiddle.net/b4ffoayh/

解决方案：什么对我有用 - 我也在 .info 中添加了左浮点数，并在 .info 上放置了 70%的宽度。这样，火狐似乎很合作。

Answer 1

您需要使用媒体查询。这是一个基于你的小提琴的快速示例：

http://jsfiddle.net/austinthedeveloper/b4ffoayh/1/

@media (max-width: 600px) {
    .image {
        display: block;
        float: none;
    }
}

缩小 html 窗口以查看其工作情况。

我还在列表中添加了清除以解决浮动问题。溢出：隐藏不是必需的，除非你出于某种原因真的想要它。

Answer 2

列表项中的两个元素都需要是浮动的。然后 .info 需要占用图像旁边的剩余空间，这可以通过使用 calc（） 函数来实现。

这是我为使其工作而添加的内容：

.info {float:left;width:calc(100% - 100px);}
li:after {content:" ";display:block;clear:left;}