如何创建由三个框组成的网格流体响应？答案

【问题标题】：How to create grid fluid responsive consist of three boxes?如何创建由三个框组成的网格流体响应？
【发布时间】：2016-11-12 00:20:13
【问题描述】：

我厌倦了在 css 和 html 中创建响应式网格，下图可能很容易理解。非常感谢您的帮助。

这是我的示例图片：

【问题讨论】：

html 和 css 代码在哪里？盒子里有什么？文字还是图片？
是的，请提供更多详细信息，不要只是抛出图像并期望解决方案
我想放置图像而不是 Box1、Box2、Box3 和 Box4。感谢亲爱的大卫托马斯，您可以创建布局。

标签： html css layout responsive-design

【解决方案1】：

您可能会为此使用一个出色的框架：bootstrap！

他们有一个出色的网格系统:)

您可能会在这里找到所需的一切：

http://getbootstrap.com/css/#grid

希望对您有所帮助:)

【讨论】：

是的，我知道，但它是定制设计，你说得对，Bootstrap 很酷。
你知道 Bootstrap 只是一个框架吧？您仍然可以使用它创建自定义设计。这样做是为了学习，但如果你这样做是因为你对 Bootstrap 是什么有一些误解，那么你只是在无缘无故地重新发明轮子。

【解决方案2】：

这是我的 css 和 Html，但我无法编写完美的 css 我是 css 和 html 的初学者。

<div class="wrapper">


        <div class="Box1">

            Box1

        </div>


        <div class="container_right">


            <div class="Box2">Box2</div>


            <div class="Box3">Box 3</div>


            <div class="Box4"> Box4</div>


        </div>



    </div>

CSS：

  .wrapper { 
  overflow:hidden;
  width: 1060px;
  margin:0 auto;
  padding:5px;
}

  .wrapper Box1 {
      float:left;
      margin-right:10px;
      width:520px;
      padding:5px;
      background-color:#808080;
  }

  .wrapper .container_right {
      width:520px;
      float:right;
  }

  .container_right .box2 {
      width:100%;
      height:200px;
      margin:5px;
      padding:5px;
      background-color:#808080;
  }

 .container_right .box3 {
     width:50%;
     height:200px;
     padding:5px;
     background-color:#808080;

 }

 .container_right .box4 {
     width:50%;
     height:200px;
     padding:5px;
     background-color:#808080;
 }

【讨论】：

【解决方案3】：

1) Stack Overflow 的工作原理如下：学习、尝试、失败，然后来这里寻求帮助。所以你需要自己付出一些努力。

2) 无论如何，必须有一百万种方法来构建这样的布局。这是一个带有 Bootstrap 的示例，使用图像作为内容。包括对框架的一些不幸的刺伤，以摆脱事物之间的沟壑。

小提琴：

https://jsfiddle.net/csy1wypc/1/

HTML：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
      <div class="single">
        <div class="img-holder">
          <img src="http://lorempixel.com/g/900/400/">
        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="double">
            <div class="img-holder">
              <img src="http://lorempixel.com/g/800/400/">
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">
          <div class="single">
            <div class="img-holder">
              <img src="http://lorempixel.com/g/600/400/">
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6">
          <div class="single">
            <div class="img-holder">
              <img src="http://lorempixel.com/g/700/400/">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.col-md-6,
.col-md-12,
.col-sm-6,
.col-sm-12,
.col-xs-6,
.col-xs-12 {
  padding: 0;
}

.row {
  margin: 0;
}

.single,
.double {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.single {
  padding-bottom: 100%;
}

.double {
  padding-bottom: 50%;
}

.single .img-holder,
.double .img-holder {
  position: absolute;
  width: 100%;
  text-align: center;
}

.single img,
.double img {
  position: relative;
  max-height: 100%;
  left: 100%;
  margin-left: -200%;
}

【讨论】：

感谢您的帮助，亲爱的 Roope。