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

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

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>