Question

关注HTML：

<body>
    <img src="http://placehold.it/400x300" alt="">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
</body>

文本块应该紧挨着图像，并且只有在min-width欠载时才会浮动到图像下方。

我尝试了以下CSS：

img {
    float: left;
}
div {
    float: left;
    min-width: 400px;
}

...不起作用，因为长文本总是漂浮在图像下方（<div>的固有属性，它希望尽可能宽）。我不想为文本块指定固定的width！

不同大小的布局示例（我的想象）： enter image description here （a），（b），（c）

（c）文本块欠载min-width - ＆gt;放在图像下方

Answer 1

您可以使用calc（）属性为文本div设置最大宽度，具体取决于图像的宽度。（运行代码段并选择“整页”以在调整浏览器窗口大小时查看效果。）

＆＃13;

img {
    float: left;
    max-width: 400px;
}
div {
    float: left;
    min-width: 400px;
    max-width: calc(100% - 400px);
    max-width: -moz-calc(100% - 400px);
    max-width: -webkit-calc(100% - 400px);
}

＆＃13;

<body>
    <img src="http://placehold.it/400x300" alt="">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
</body>

＆＃13;

正如@ C-Link_Nepal所指出的，这是一个尚未被所有浏览器本机支持的CSS3功能。使用http://caniuse.com/#search=calc检查目标浏览器。

Answer 2

您需要将css的overflow属性应用于div：

img {
    float: left;
}
div {
    float: left;
    min-width: 400px;
    overflow: hidden; /* this makes sure the text not go below the image */
}

带有text和min-width </div>的<div>旁边的<img/>的CSS

2 个答案: