可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

assume I try to get almost similar kind of result.

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 .

回答1:

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>

回答2:

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.