我怎么能浮动图片填充所有空间 [英] how can i get floating imgs to fill all space

问题描述

我有一些图像宽度固定的大小。我希望他们像网格一样填满，像这样：

但是会发生这种情况：

如何让他们填满所有内容？

html：

 < div id =product-pics> 
< img src =img / dummy / 282x282.pngalt =class =tile/> 
< img src =img / dummy / 566x282.pngalt =class =tile/> 
< img src =img / dummy / 282x282.pngalt =class =tile/> 
< img src =img / dummy / 282x282.pngalt =class =tile/> 
< img src =img / dummy / 282x566.pngalt =class =tile/> 
< img src =img / dummy / 282x282.pngalt =class =tile/> 
< img src =img / dummy / 282x282.pngalt =class =tile/> 
< img src =img / dummy / 282x282.pngalt =class =tile/> 
< img src =img / dummy / 566x282.pngalt =class =tile/> 
< / div> 
  

css：

  .tile {
 margin：1px; 
 float：left; / *删除图像之间的4px间隔* / 
} 
  

解决方案 div>

在这种情况下，您需要更改HTML中的顺序。先放282x566，然后只浮动一个。让剩下的东西浮在左边，它应该可以工作。

DEMO

重新排列 HTML ：

 < div id =product-pics> 
< img src =img / dummy / 282x566.pngalt =282x566class =tile double-h right/> 
 
< img src =img / dummy / 282x282.pngalt =282x282class =tile/> 
< img src =img / dummy / 282x282.pngalt =282x282class =tile/> 
< img src =img / dummy / 282x282.pngalt =282x282class =tile/> 
< img src =img / dummy / 282x282.pngalt =282x282class =tile/> 
 
< img src =img / dummy / 566x282.pngalt =566x282class =tile double-w/> 
< img src =img / dummy / 282x282.pngalt =282x282class =tile/> 
< / div> 
  

相关 CSS ：

 ＃product-pics {width：852px; } 
 .tile {
 float：left; 
 width：282px; 
 height：282px; 
 margin：0 2px 2px 0; 
} 
 .right {float：right; } 
 .double-h {height：566px; } 
 .double-w {width：566px; } 
  

I have some images width fixed sizes. I want them to fill up like a grid, like this:

But instead this happens:

How can I make them fill everything?

html:

<div id="product-pics">
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/566x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x566.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/566x282.png" alt="" class="tile" />
</div>

css:

.tile {
    margin: 1px;
    float: left; /* to remove the 4px gap between images */
}

解决方案

In this case, you need to change a bit the order in your HTML. Put 282x566 first and float only that one right. Leave the rest floated to the left and it should work.

DEMO

Rearranging the HTML:

<div id="product-pics">
    <img src="img/dummy/282x566.png" alt="282x566" class="tile double-h right" />

    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />

    <img src="img/dummy/566x282.png" alt="566x282" class="tile double-w" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
</div>

Relevant CSS:

#product-pics { width: 852px; }
.tile {
    float: left;
    width: 282px;
    height: 282px;
    margin: 0 2px 2px 0;
}
.right { float: right; }
.double-h { height: 566px; }
.double-w { width: 566px; }

这篇关于我怎么能浮动图片填充所有空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！