u010905359 2020-05-26 10:21 采纳率: 0%
浏览 1271
已结题

html左右两栏式布局怎样实现

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

显示失败是什么鬼

  • 写回答

2条回答 默认 最新

  • Cheesepiupiupiu 2020-05-26 10:38
    关注

    可以使用display：flex；
    浮动只需要写在父元素，然后创建bfc解决高度塌陷就好了。

    评论

报告相同问题？