如何将图像包裹在中心的一个图像周围？

Question

我要做的是让一个主要图像在小巷中位于页面的中心，然后围绕该中心图像将是许多将围绕主图像的图像。 例：

相反，我只是让他们像下面的图片一样查看，即使我向所述图片添加浮动。

只是把它放在那里，我正在使用bootstrap。

Answer 1

这是一种算法，您可以在PHP / SASS中使用它来生成类。

var output = '';

// Rows.

    for (var y = 0; y < 9; y++) {

    // Cells.
    for (var x = 0; x < 14; x++) {

        // Clear the area for the main image.
        if (y < 7 && x > 2 && x < 11) {
            output += '0';
        } else {
            output += '1';
        }

        if (x === 13) {
            output += '\n';
        }
    }
}

// Output.
11100000000111
11100000000111
11100000000111
11100000000111
11100000000111
11100000000111
11100000000111
11111111111111
11111111111111

请参阅我使用Bootstrap构建的示例。只需确保图像的纵横比相同。

＆＃13;

＆＃13;

img {
  max-width: 100%;
  height: auto;
}
.margin-b--10px {
  margin-bottom: 10px;
}
.padding-lr--5px {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.padding-lr--10px {
   padding-left: 10px !important;
  padding-right: 10px !important;
 }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <div class="container well">
    <h1>Header</h1>
  </div>
</header>

<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div class="row">
        <script>
          var count = 24;
          while (count) {
            document.write('<div class="col-xs-4 margin-b--10px padding-lr--5px"><img src="http://placehold.it/100x100/eeeeee?text=Column+1"></div>');
            count--;
          }
        </script>
      </div>
    </div>

    <div class="col-xs-6 padding-lr--5px"> 
      <div class="margin-b--10px"><img src="http://placehold.it/700x700"></div>
      
       <div class="row padding-lr--10px">
        <script>
var count = 12;
while(count) { document.write('<div class="col-xs-2 margin-b--10px padding-lr--5px"><img src="http://placehold.it/100x100/333333?text=Column+1"></div>');
count--;
}
        </script>
      </div>
    </div>

    <div class=" col-xs-3 ">
       <div class="row ">
        <script>
var count = 24;
while(count) { document.write('<div class="col-xs-4 margin-b--10px padding-lr--5px "><img src="http://placehold.it/100x100?text=Column+1 "></div>');
count--;
}
        </script>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;