收藏
回答

关于页面布局问题


布局的时候 想让左右2边一样高,而且每个块都成正方形。这种该怎样布局

最后一次编辑于  01-03
回答关注问题邀请回答
收藏

2 个回答

  • 土豆是只小橘喵
    土豆是只小橘喵
    01-03

    flex 了解一下

    01-03
    赞同
    回复 3
    • 🇨🇳
      🇨🇳
      01-04

      flex,怎么控制2边高度一样呢。 右边是2个正方形 加边距的高度 = 左边大正方形高度

      01-04
      回复
    • 土豆是只小橘喵
      土豆是只小橘喵
      01-04回复🇨🇳



       不晓得是不是你要的效果


      <!DOCTYPE html>

      <html>

      <head>

        <style type="text/css">

          .container{

              display: flex;

              flex-direction: row;

              justify-content: space-around;

          }

          .square-p{

              width: 49%;

          }


          .left{

              background: blue;

          }

          .right{

              background: green;

              display: flex;

              flex-direction: column;

              text-align: center;

          }

          .line{

              display: flex;

              flex-direction: row;

          }


          .square{

              width:50%;

              padding:3px;


          }

          .item{

              width:100%;

              padding:50% 0 50% 0;

          }

          .item1{

              background: red;

          }

          .item2{

              background: yellow;

          }

          .item3{

              background: gray;

          }

          .item4{

              background: pink;

          }

        </style>

      </head>

      <body>

          <div class="container">

              <div class="square-p left"></div>

              <div class="square-p right">

                  <div class="line">

                       <div class="square "> 

                          <div class="item1 item"></div>

                      </div>

                      <div class="square"> 

                          <div class="item2 item"></div>

                      </div>

                  </div>


                  <div class="line">

                       <div class="square "> 

                          <div class="item3 item"></div>

                      </div>

                      <div class="square"> 

                          <div class="item4 item"></div>

                      </div>

                  </div>

              </div>

          </div>

      </body>


      01-04
      2
      回复
    • 🇨🇳
      🇨🇳
      01-04回复土豆是只小橘喵

      就是这样的,谢谢了。赞赞赞~

      01-04
      回复
  • 烟雨海花 lwl
    烟雨海花 lwl
    01-03

    首先全部左浮动,接着第一块的宽高和后面的方块宽高分别设置一下

    01-03
    赞同
    回复