html - 如何在CSS中的“float:right”元素中使用最小宽度？

看这个example

html不遵守min-width，只要我们在CSS规则中有float:right

.right {
    float:right;
    background:blue;
    min-width:400px;
}

如果删除float:right或将其更改为float:left，则html元素将不会比min-width窄。

如何将min-width用于浮动的元素？

截图：正如一些小伙子所评论的那样，这就是我在最新版的Debian上的Chromium上看到的。

如您所见，div的左侧及其内容是不可见的（换句话说，在可见部分之外）。

最佳答案

右浮动div的作用与原始示例中的操作相同：它至少保持400px宽。如果视口缩小到小于400像素，则div的一部分会被遮盖，因为不允许它的宽度小于400像素。所以问题是，您在这里真正想要什么行为？也许您真正想要的是最小宽度为400px的非浮动包装器元素？

编辑：这是一个非浮动包装器如何使其工作的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
body {
    background:red;
    margin: 0;
    padding: 0;
}

.wrap {
    background:#e7e7e7;
    min-height: 600px;
    min-width: 400px;
}
.right {
    float:right;
    background:blue;
    min-width:400px;
}
</style>

</head>
<body>
<div class="wrap">
    <div class="right">
    TEST
    </div>
</div>

</body>
</html>

包装纸当然可以染成红色。我只是将其设为灰色，所以很容易看到。

关于html - 如何在CSS中的“float:right”元素中使用最小宽度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16318370/