Question

我有一张漂浮的图片，右侧有文字。我想在文本上设置最小宽度，所以当调整浏览器大小时，文本会挤压但只有一定的宽度。之后它应该在图片下移动。它适用于chrome，但不适用于Firefox。我不想使用mediaqueries。 Firefox仅在我设置宽度属性但我不想要的情况下才有效。谢谢你的帮助。

代码

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

        </li>

    </ul>
</div>

CSS

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

的jsfiddle http://jsfiddle.net/b4ffoayh/7/

Answer 1

我不知道，为什么你想采用这种方法，但问题似乎在于你的信息＆＃39;＆＃39; div获取第一个li标签的整个宽度。

imho，一种更简单的方法来做你想要的就是使用flexbox。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

这可能伴随着额外的返工，但你可以获得更多。

Answer 2

我希望我知道原因，但添加如下代码似乎正在起作用。

li {
    display:inline-block; /*or inline-table*/
}

更新演示：http://jsfiddle.net/bt0c252z/

firefox没有响应浮动溢出：隐藏

2 个答案: