最简单的css实现页面宽度自适应

最新推荐文章于 2024-06-25 22:50:37 发布

weixin_33812433

最新推荐文章于 2024-06-25 22:50:37 发布

阅读量284

点赞数

原文链接：http://www.cnblogs.com/rxbook/p/9445060.html

版权

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

CSS：

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;
}

如果在PC访问，就会显示在一行，如果在手机访问，就会显示为三行。（视手机屏幕的分辨率定）

转载于:https://www.cnblogs.com/rxbook/p/9445060.html