在Firefox中浮动隐藏溢出和最小宽度答案

【问题标题】：floats with overflow hidden and min-width in firefox在Firefox中浮动隐藏溢出和最小宽度
【发布时间】：2015-04-10 23:53:20
【问题描述】：

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

代码

<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 中添加了 float left 并将 70%width 放在 .info 上。这种方式firefox似乎可以合作。

【问题讨论】：

标签： css css-float

【解决方案1】：

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

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

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

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

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

【讨论】：

我不想使用媒体查询。将包装器视为全宽的一部分。所以我需要根据包装器的宽度来做这个。

【解决方案2】：

列表项中的两个元素都需要浮动。那么 .info 需要占用图片旁边的剩余空间，这可以通过使用 calc() 函数来实现。

这是我添加使其工作的：

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

【讨论】：

嗨，我想我也需要 css2 的解决方案：)