如何將圖像包裹在中間的一個圖像周圍？

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>