最簡單的css實現頁面寬度自適應

本文轉載自查看原文 2018-08-08 18:56 9562

如果在PC訪問，就會顯示在一行，如果在手機訪問，就會顯示為三行。（視手機屏幕的分辨率定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>最簡單的css實現頁面寬度自適應</title>
    <style>
        div.rxs {
            width: 100%;
            height: auto;
        }

        div.rxleft {
            width: auto;
            float: left;
            height: auto;
            margin-bottom: 0;
            margin-top: 10px;
            padding-right: 10px;
        }

        hr {
            margin-top: 10px;
            margin-bottom: 0;
            border-top: 1px solid #CCC;
        }
    </style>
</head>
<body>

<div class="rxs">
    <div class="rxleft">
        第一段內容，可以是任何html標簽
    </div>
    <div class="rxleft">
        第二段內容，可以是任何html標簽
    </div>
    <div class="rxleft">
        第三段內容，可以是任何html標簽
    </div>
    <div style="clear:both"></div>
</div>

<hr>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css實現簡單的頁面自適應寬度 JS獲取頁面寬度高度及Vue頁面自適應方案 css實現右側固定寬度，左側寬度自適應 Word批量設置表格寬度自動適應頁面寬度 css3實現盒子寬度隨文字寬度自適應 css實現右側固定寬度，左側寬度自適應頁面通過CSS實現頁面自適應【筆記】css 實現寬度自適應屏幕高度自適應寬度 html頁面自適應寬度 aspose word for java調整表格適應頁面寬度