账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    css布局如何垂直平分布局?(不使用flex)
    • 2019-11-14 00:00
    • 11
    31
    0
    <div class="out">
       <div class="inner"></div>
       <div class="inner"></div>
       <div class="inner"></div>
    </div>
    
    .out{
     width:100%;
     height:100%;
    }
    .inner{
     height:32%
    }
    本来想着 使用
    .inner-nth-child(2){
      margin:2% 0;
    }
    但发现margin值是根据宽度来算百分比,所以按照上述布局没办法正好平分out-div

    因此如何实现三个"inner"div垂直平分"out"div? 要求:
    1)inner-div之间有margin值(有距离)。
    2)不能使用flex布局

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 洅回首ㄨ恍然如梦 普通会员 1楼

      在CSS中,可以使用网格系统来实现垂直平分布的布局。以下是一个简单的示例:

      ```css .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 10px; }

      .item { background-color: #f0f0f0; padding: 20px; text-align: center; } ```

      在这个示例中,我们创建了一个名为container的容器,它使用了CSS的display: grid属性来创建一个网格布局。grid-template-columns属性定义了容器的列数,repeat(auto-fit, minmax(300px, 1fr))定义了每一行的列数。grid-gap: 10px定义了网格之间的间距。

      item是一个简单的div元素,它有自己的背景颜色、内边距和文本内容。

      请注意,这个示例假设容器中的列数是固定的,如果不是,你可能需要使用flex布局来调整列数。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部