2

看这个例子

html 不尊重min-width只要我们float:right在 CSS 规则中

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

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

我们如何使用min-width浮动的元素？

截图：正如一些人所评论的，这是我在 Debian 上最新版本的 Chromium 上看到的。

在此处输入图像描述

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

4

2 回答 2

1

div 是块级元素，默认会占用 100% 的空间。

或者，如果您只想查看 400px 元素而不是 100% 宽度，您可以使用display: inline-block，或为其指定固定宽度。

演示

注意：如果你不想使用display: inline-block;，你可以保持原样，如果你最小化窗口，你会看到一个水平滚动条，所以如果你认为使用min-width只会显示宽度为 400 px 的元素比你错了，它是min而不是max

于 2013-05-01T12:50:28.597 回答
1

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

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

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

包装纸当然可以是红色的。我只是把它变成灰色的，所以很容易看到。

于 2013-05-01T13:09:10.947 回答