Question

我正在开发一个简单的响应式布局，其中我有一个列表，其中包含一个小的浮动左图像和有关图像的信息。在全宽度上，我想在与图像相同的行上显示信息。在小宽度我需要文本出现在图像下。我在信息容器中使用min-width以及隐藏溢出，因此它不会换行。这适用于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并将70％的宽度放在.info上。这样firefox似乎合作。

Answer 1

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

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

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

缩小html窗口以查看它是否正常工作。

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

Answer 2

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

这是我为使其发挥作用而添加的内容：

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

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

2 个答案: