响应式布局之min-width，max-width

最新推荐文章于 2024-05-06 08:30:00 发布

原创最新推荐文章于 2024-05-06 08:30:00 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#min-width #max-width #响应式 #布局 #css3

前端专栏收录该内容

72 篇文章

订阅专栏

本文介绍了CSS3中min-width和max-width属性在响应式布局中的作用。通过设置元素的最小和最大宽度，可以确保内容在不同屏幕尺寸下适配和展示。当容器宽度无法容纳所有浮动元素时，它们会自动换行，实现布局的自适应调整。

min-width表面这个div的最小宽度，而max-width限制这个div的最大宽度。因为我们将三个div都设置浮动，并且设置其最大的宽度，另外所以当容器的宽度不能够满足div宽度的时候，就会换行到下一行，从而实现响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <style type="text/css">
        article{
            width: 100%;
        }
        h1{
            text-align: center;
        }
        img {
            width: 100%;
            height: auto;
        }
        .one {
            min-width: 500px;
            border:1px solid red;
        }
        .two {
            background-color: #666;
        }
        .three {
            background-color: #ccc;
        }
        .float {
            max-width: 350px;
            float: left;
            text-align: justify;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <article>
        <h1>Responsive Layout</h1>
        <div class="one float">
            <img src="1.jpg" alt="" >
        </div>
        <div class="two float">
            twotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwo
            twotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwovvvvv
        </div>
        <div class="three float">   1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
        </div>
    </article>
</body>
</html>