如何将图像环绕在中心的一张图像周围？

Question

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

相反，即使我向所述图片添加浮动，我也只是让他们查看如下图。

只是为了把它放在那里，我正在使用引导程序。

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 构建的示例。只需确保图像的纵横比相同即可。

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

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