移动web 左边定宽,右边自适应的布局(利用float的特性)

最新推荐文章于 2024-09-07 01:53:51 发布

原创最新推荐文章于 2024-09-07 01:53:51 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #移动web #布局

CSS 同时被 2 个专栏收录

65 篇文章

订阅专栏

移动web

10 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的浮动布局方法，并通过一个具体的例子展示了如何使不定长度的内容环绕固定宽度的元素。此外，还讲解了如何通过设置溢出属性来确保页面布局的正确呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>  
    <style>  
  
        .left {  
            width: 200px;  
            height: 600px;  
            background-color: pink;  
            float: left;    /* 浮动 */  /* html代码中,浮动元素的代码要写在定宽元素的下面 */
        }  
        .right {   /* 不要设置宽度 */  
            background-color: blue;  
            overflow: hidden;   /* 溢出隐藏(利用浮动是为了让文字(不定长)环绕图片(定宽)的特点) */  
        }  
  
    </style>  
</head>  
<body>  
    <div class="left"></div>  
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi nesciunt, laborum facere perferendis cupiditate accusamus neque libero labore earum, enim quasi, molestiae magnam architecto laboriosam distinctio fuga, eum delectus quis consectetur natus voluptatum minus nihil. Odio omnis autem reprehenderit possimus, voluptas quibusdam! Et rem labore ipsam enim commodi rerum voluptate. Sed illo minus, provident tempore odit quos nesciunt cupiditate omnis similique. Nihil voluptates at asperiores corporis dolor quasi laudantium tempora officiis eos, doloribus velit atque, inventore. Dolorem quasi, aperiam voluptatum itaque, repellendus deleniti earum hic, illo non optio cupiditate! Voluptates eum molestiae nam dicta alias dolore placeat, debitis possimus modi.</div>  
</body>  
</html>