<div>旁边带有文本和最小宽度的<img>的CSS

debugcn 发表于 Dev

舍特尔

以下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;
}

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

不同大小（我想像）的布局示例：在此处输入图片说明（a），（b），（c）

（c）文本块欠位min-width->放置在图像下方

保罗

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

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);
}

<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>

正如@ C-Link_Nepal所指出的那样，这是所有浏览器都不支持的CSS3功能。使用http://caniuse.com/#search=calc检查您的目标浏览器。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。