Responsive grid box with image automatically resiz

2020-04-26 12:32发布

站内问答 / HTML/CSS
1886 2 6

assume I try to get almost similar kind of result.

enter image description here

So i write this code to get this this kind of box . But the code is not complete Please see my code ,

   <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

     <style>
      .row{
        width:90%;
        margin-left:5%;
        margin-right:5%;
     }

    .hig-co{
     width:66.6677% !important;
     max-width:66.667% !important;
     min-width:66.667% !important;
    }
     .sm-co{
       width:33.333% !important;
       max-width:33.333% !important;
       min-width:33.333% !important;
     }
     .hig-all{
       width:95%;

    }
     </style>


    <div class="container">
      <div class="row">

       <div class="all">

          <div class="hig-co">
            <div class="hig-all">
             <img src="#" />
            </div>

             <div class="hig-all">
                <div class="col-md-4 col-sm-4">
                 <img src="#">
                </div>
                <div class="sm-co">
                 <img src="#">
                </div>
            </div>

          </div>

          <div class="col-md-3 col-sm-12 sm-co">

            <div class="col-md-12 col-sm-12"><img src="#"></div>
            <div class="col-md-12 col-sm-12"><img src="#"></div>
            <div class="col-md-12 col-sm-12"><img src="#"></div>

          </div>
      </div>
     </div>
    </div>

    </body>
    </html>

Please help to complete this .

Here I have to make almost same kind of result. So Please help to make this kind of structure using css . Please not i will display this layout only if screen size min width is 766px. If the screen size less than 766px i will hide this layout using media query . After making this layout i will insert images to this layout . So images need automatically fit in this layout .

2条回答
forever°为你锁心
2楼-- · 2020-04-26 12:35

Here is a simple solution using Flexbox where you can easily adjust the different sizes:

body {
  margin: 0;
}
* {
 box-sizing:border-box;
}
div {
  border:1px solid #fff;
}

.container {
  display: flex;
  height: 100vh;
}

.left {
  flex: 3;
  display:flex;
  flex-wrap:wrap;
}
.left > div:nth-child(1) {
  width:100%;
  height:40%;
  background:red;
}
.left > div:nth-child(2) {
  width:33%;
  height:60%;
  background:red;
}
.left > div:nth-child(3) {
  flex:1;
  background:blue;
}

.right {
  flex: 2;
  display: flex;
  flex-direction: column;
}
.right > div:nth-child(1),.right > div:nth-child(3) {
  height:25%;
  background:red;
}
.right > div:nth-child(2) {
  flex:1;
  background:blue;
}
<div class="container">
  <div class="left">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="right">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
3楼-- · 2020-04-26 12:55

I have a great solution with CSS Grids..

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>CSS Grid Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="stylesheet.css">

    </head>
    <body>

        <div class="container">

            <section>
                <header>
                    <img src="demo.jpg" alt="">
                </header>
                <div class="left-left">
                    <img src="demo.jpeg" alt="">
                </div>
                <div class="left-right">
                    <img src="demo.jpg" alt="">
                </div>
            </section>
            <aside>
                <div class="right-top">
                    <img src="demo.jpeg" alt="">
                </div>
                <div class="right-middle">
                    <img src="demo.jpeg" alt="">
                </div>
                <div class="right-bottom">
                    <img src="demo.jpeg" alt="">
                </div>
            </aside>
        </div>
    </body>
</html>

CSS:

 .container {
    display: grid;
    grid-template-columns: 66.667% 33.333%;
    grid-template-areas:
      "section aside";
  }
  section {
      grid-area: section;
      display: grid;
      grid-template-columns: 42% 58%;
      grid-template-rows: 281px 501px;
      grid-template-areas:
        "header header"
        "left-left left-right"
  }
      header {
          grid-area: header;
      }
      .left-left {
          grid-area: left-left;
      }
      .left-right {
          grid-area: left-right;
      }

  aside {
      grid-area: aside;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 150px 480px 1fr;
      grid-template-areas:
        "right-top"
        "right-middle"
        "right-bottom";
  }
      .right-top {
          grid-area: right-top;
      }
      .right-middle {
          grid-area: right-middle;
      }
      .right-bottom {
          grid-area: right-bottom;
      }
  img {
    width: 100%;
    height: 100%;
  }

I'm not entirely sure what you meant with "And the thin if our screen size less than this 756 then we will hide this and the maximum width of the container is 1180 px." but a simple media query would definitely do the trick here.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)