HTML5/CSS Re-Flow Grid Layout

问题

I've been looking for a way to do this for some time, and I haven't yet come across anything. What I'm after is to be able to display a series of pictures in a grid layout, ordered from left to right then up and down. I want it to take up as much space as is available on each row (whilst adhering to certain conditions such as padding between images) and when the window is re-sized, it will automatically re-calculate where the images should be positioned.

I put together the following graphic to help aid what I'm trying to get at:

Is there any easy way to do this in CSS, HTML5 and/or JavaScript?

Thanks, Josh.

回答1:

The "easy" way:

img {
    float: left;
}

Here's a jsfiddle. http://jsfiddle.net/Sp3pU/

回答2:

Use percentages. Try something like:

#outer{
  height:400px; width:400px;
}
#outer img{
  width:30%; border:0; margin:2%; float:left;
}
#outer #bd{
  clear:left;
}

Your HTML could include:

<div id='outer'>
  <img src='whatever1.png' alt='whatever1' />
  <img src='whatever2.png' alt='whatever2' />
  <img src='whatever3.png' alt='whatever3' />
  <img src='whatever4.png' alt='whatever4' />
  <img src='whatever5.png' alt='whatever5' />
  <img src='whatever6.png' alt='whatever6' />
  <img src='whatever7.png' alt='whatever7' />
  <img src='whatever8.png' alt='whatever8' />
  <img src='whatever9.png' alt='whatever9' />
  <img src='whatever10.png' alt='whatever10' />
  <img src='whatever11.png' alt='whatever11' />
  <img src='whatever12.png' alt='whatever12' />
  <div id='bd'></div>
</div>

Adjust margins as necessary. It's 2% off, since 3 30% imgs would take up 90%, then do to margin overlapping that should be 4 margins at 2%, so 8% for a total of 98%. You might want to use 20% widths with 4% margins, for 4 across and 100%.

来源：https://stackoverflow.com/questions/17713247/html5-css-re-flow-grid-layout

标签

javascript

css

html5

image

grid