Question

我厌倦了在css＆amp;中创建响应式网格html，下面的图片可能很容易搞清楚。非常感谢你的帮助。

这是我的示例图片：

Answer 1

您可以使用一个优秀的框架：bootstrap！

他们拥有出色的网格系统：）

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

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

希望应该有所帮助：）

Answer 2

这是我的css＆amp; Html，但我不能写出完美的CSS我是如此初学css＆amp; 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;
 }

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

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

3 个答案: