Lewi Morgan 2021-10-10 14:48 采纳率: 37.5%
浏览 23
已结题

圣杯布局添加padding:0 200px; 显示效果不太对

    <title></title>
    
    <style type="text/css">
    
    *{
        margin: 0px;
        padding: 0px;
    }
    
    
    
    
    .header{
        
        height: 50px;
        width: 100%;
        background-color: red;
        text-align: center;
        border: 1px black solid;
    }
    
    
    .footer{
        height: 50px;
        width: 100%;
        background-color: yellow;
        text-align: center;
        border: 1px black solid;
    }
    
    
    .centent{
        padding: 0 200px ;
        height: 400px;
        width: 100%;
        background-color: greenyellow;
        border: 1px black solid;
    }
    
    
    .left{
        margin-left: -100%;
        width: 200px;
        background-color: pink;
        
        float: left;
        /* position: relative;
        left: 200px; */
    }
    
    .right{
        margin-left: -200px;
        width: 200px;
        background-color: peru;
        float: left;
        /* position: relative;
        right: 200px; */
    }
    
    .midddle{
        
        
        background-color: powderblue;
        /*使其浮动 让他不是块元素 方便使用margin-left上去*/
        /*因为设置浮动后其他元素可以上去 
          实际上middle和left是合在一起的  (因为显示效果)
          所以把left向左浮动100% 也就是 margin-left:-100%;
        */
        
        float: left;
        /*但是因为脱离文档流 所以宽度由内容撑开 所以指定一个宽度*/
        width: 100%;
        
    }
    
    
    .clearfix:after{
        content: ;
        clear: both;
        display: table;
    }
    
    .clearfix{
        zoom: 1;
    }
    
    </style>
    
</head>
<body>
    
    <div class="header">header</div>
    
    <div class="centent clearfix">
        <div class="midddle">middle</div>
        <div class="left">left</div>
        
        
        <div class="right">right</div>
    </div>
    
    <div class="footer">footer</div>
</body>
  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2021-10-11 09:44
    关注

    你把 width 100%去掉 。 你给了100%又加 padding 当然会这样

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月21日
  • 已采纳回答 10月13日
  • 创建了问题 10月10日

悬赏问题

  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 问一下，定向解包是什么意思
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
  • ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境
  • ¥30 关于#java#的问题，请各位专家解答！