1

我知道之前有人问过这个问题（1 , 2 , 3 , 4 , 5 , 6），但这些解决方案似乎都不适合我。

HTML

<div class="wrapper">
    <img src="http://imgur.com/5dEdRvCs.png" />
    <div>
        Lorem ipsum dolor sit amet, consectetur fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

CSS

.wrapper > *{
    float: left;
}

jsFiddle

我希望 theimg和divunder the wrapper to float left，以及所有文本的 div 占用页面上的所有剩余空间，如下所示：

演示好

相反，它看起来像这样：

演示坏

我尝试添加overflow: hidden到包装器，尝试了一些设置width，min-width但无济于事。

在 CSS 中必须有一些相对简单的方法来实现这一点。

4

3 回答 3

6

只需浮动图像，文本就会向右对齐。

.wrapper img {
    float:left;
}

小提琴。_

于 2013-11-13T03:26:35.740 回答
0

另一种方法是使用display: inline-block而不是float

这是小提琴：

小提琴

于 2013-11-13T04:48:51.740 回答
0

您的代码实际上将每个元素都带到了左侧。所以图像在左边，文本也在左边。

如果您在图像和文本上都设置了适合您的宽度。

您可以尝试：

.wrapper img {
    width: 20%;
}
.wrapper > div {
    width: 80%;
}

然后它将按您的意愿工作。

于 2013-11-13T03:30:57.930 回答