UI 自适应宽度布局-按百分比_autojs ui w= 百分比设置宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/johnyang123_assemble/article/details/120569272

本文详细讲解了如何使用HTML和CSS实现响应式设计，通过实例展示了在不同屏幕尺寸下左、中、右布局的调整策略，适合前端开发者了解和实践。

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

<html>
    <head>

    </head>
    <body>
       <div id="main">
           <div id="row1">
                <div id="left">left</div>
                <div id="middle">middle</div>
                <div id="right">right</div>
           </div>

           <div id="row2">
           
           </div>     
            <div id="row3">
                <div id="c1"> </div>
                <div id="c2"> </div>
                <div id="c3"> </div>
                <div id="c4"> </div>
           </div>
       </div>
    </body>
</html>
<style>
    #main {
        background-color:blanchedalmond;
        position:absolute;
        left: 10px;
        right: 10px;
        top: 0px;
        bottom: 0px;

    }
    #row1 {
        display: absolute;
        width: 100%;
        height: 33.3%;
        background-color: darkgreen;
    }
    #left {
        background-color: chocolate;
        float: left;
        width: 50%;
        height: 100%;
    }
    
    #middle {
        background-color:darkgrey;
        float: left;
        width: 25%;
        height: 100%;
    }
    #right {
        background-color: cornflowerblue;
        float: left;
        width: 25%;
        height: 100%;
    }
    #row2 {
        display: absolute;
        width: 100%;
        height: 33.3%;
        background-color: dimgrey;
    }  
    #row3 {
        display: absolute;
        width: 100%;
        height: 33.4%;
        background-color: lightblue;
    }
    #c1 {
        background-color:lightblue;
        float: left;
        width: 25%;
        height: 100%;
    }
    #c2{
        background-color:lightgray;
        float: left;
        width: 25%;
        height: 100%;
    }
    #c3 {
        background-color:lightskyblue;
        float: left;
        width: 25%;
        height: 100%;
    }
    #c4 {
        background-color: chocolate;
        float: left;
        width: 25%;
        height: 100%;
    }
</style>