html左右两栏式布局
时间：2023-05-05 23:28:46 阅读：252642 作者：2215
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 方法一：定位 --> <style> .wrap{ width:900px; margin:0 auto; position: relative; } #left{ width:200px; height:500px; background: #ccffff; position: absolute; top:0; left:0; } #right{ width:700px; height:500px; background: #ffcccc; position: absolute; top:0; right:0; } </style> <!-- 方法二： 纯浮动式 --> <style> .wrap{ width:900px; margin:0 auto; overflow: hidden; } #left{ width:200px; height:500px; background: #ccffff; float: left; } #right{ width:700px; height:500px; background: #ffcccc; float: left; } </style><!-- 方法三： 混合浮动+普通流 --><style> .wrap{ margin:0 auto; width:80%; } #left{ width:200px; height:500px; background: #ccffff; float: left; } #right{ height: 500px; background: #ffcccc; margin-left:200px; } </style></head><body><div class="wrap"> <aside id="left"></aside> <section id="right"></section></div></body></html>
版权声明：该文观点仅代表作者本人。处理文章：请发送邮件至 三1五14八八95#扣扣.com 举报，一经查实，本站将立刻删除。