Question

假设我尝试得到几乎相似的结果。

所以我写这段代码来得到这种盒子。但代码不完整请参阅我的代码，

   <!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>

请帮助完成此操作。

在这里，我必须做出几乎相同的结果。所以请使用css帮助制作这种结构。请不要仅在屏幕尺寸最小宽度为766px时显示此布局。如果屏幕尺寸小于766px，我将使用媒体查询隐藏此布局。在进行此布局后，我将插入图像到此布局。因此图像需要自动适应此布局。

Answer 1

我有一个很好的CSS网格解决方案..

<强> HTML：

 .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%;
  }

<强> CSS：

from urllib import request
from bs4 import BeautifulSoup

html = 'http://www.mycryptobuddy.com/BitcoinMiningCalculator'
page = request.urlopen(html)
soup = BeautifulSoup(page, 'html.parser')
dif = soup.find('input', attrs={'ng-model': 'difficulty'})

print(dif.get('value'))
print(dif.attrs)

我不完全确定你的意思是“如果我们的屏幕尺寸小于756那么薄，那么我们将隐藏它，容器的最大宽度为1180像素。”但是一个简单的媒体查询肯定会在这里发挥作用。

Answer 2

以下是使用Flexbox的简单解决方案，您可以轻松调整不同的尺寸：

＆＃13;

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;
}

＆＃13;

<div class="container">
  <div class="left">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="right">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

＆＃13;

具有图像的响应式网格框自动调整大小

2 个答案: