我想要做的是有一個主要圖像,將衚衕在頁面的中心,然後圍繞該中心圖像成爲許多圖像,將圍繞主圖像。 例如: 如何將圖像包裹在中間的一個圖像周圍?
而是我只是讓他們像下面的圖片查看,即使當我添加一個浮動圖片。
只是把這個放在那裏,我使用bootstrap。
我想要做的是有一個主要圖像,將衚衕在頁面的中心,然後圍繞該中心圖像成爲許多圖像,將圍繞主圖像。 例如: 如何將圖像包裹在中間的一個圖像周圍?
而是我只是讓他們像下面的圖片查看,即使當我添加一個浮動圖片。
只是把這個放在那裏,我使用bootstrap。
這是一個算法,您可以在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>
我的意思是這個作品,但是有沒有一種方式來做到這一點,所有的小圖像在一起,而不是分成3組? –
@JonAugood是的,你可以用'position:absolute'對每個塊的座標進行硬編碼,我會用SASS生成這種樣式。還有一個名爲[Masonry](http://masonry.desandro.com/)的JavaScript庫,id會動態地做類似的事情,但我不能保證它能解決任務。 – halfzebra
@JonAugood這裏是一個SASS的例子,我用這種方法的核心思想http://sassmeister.com/gist/caf4133ac9afef4b9129 – halfzebra
請參閱[**如何問**]的問題上堆棧溢出(http://stackoverflow.com/help/how-to-ask)的問題,什麼類型[ **可以被問**](http://stackoverflow.com/help/on-topic)和什麼類型[**應該避免。**](http://stackoverflow.com/help/dont-ask ) –
您可能想要查看Flexbox的這個:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - 如果您需要支持舊瀏覽器,則可以通過以下方式獲得相同的效果:使用表格。 – thomasfuchs
即使'flexbox'也無法做到這一點。 –