Arrange thumbnails with CSS

Floating thumbnailsHttp://realworldstyle.com/thumb_float.html arrange thumbnails with CSS: If you need some thumbnails to link to a real big image, this is a very common application. To be more complex, each thumbnail has a title that needs to be placed under the image. Therefore, you need to arrange images on the screen in units of behavior. However, when the browser window is different, the number of rows (Fluid layout) of the image is automatically adjusted ). Instead of table, we use CSS to complete the process. Step 1: Each thumbnail needs a title in the bottom and middle. If table is used, a TD is required for each image/Title pair. To use CSS, you need to put them in a div. To arrange them in a row in the horizontal direction, you need to move all these divs to the left. Therefore, we can get:

div.float {

 float: left;

 width: 120px;

 padding: 10px;

 }

div.float p {

   text-align: center;

   }

HTML code:

<div class="float">

 <br>

 <p>caption 1</p>

</div>：

<div class="float">

 <br>

 <p>caption 2</p>

</div>

<div class="float">

 <br>

 <p>caption 3</p>

</div>

Step 2: Let the thumbnail wrap as needed. In fact, after float is used, this need has been met. When the window is large but the window is small, the number of rows is adjusted by the thumbnail. Step 3, if you have several types of thumbnails, You Want To explicitly use the background or border to differentiate them. Use Div to put the same class together.

div.container {

 border: 2px dashed #333;

 background-color: #fff;

 }

But there is a problem. Because of float, a float element will not occupy space in the normal Document Stream. This will make the container unable to include the image you want to include, so add clear.

div.spacer {

 clear: both;

 }

The current Code is as follows. Note that there is a sapcer at the beginning and end of the Code.

<div class="container">

<div class="spacer">

  

</div>

<div class="float">

 <br>

 <p>caption 1</p>

</div>

<div class="float">

 <br>

 <p>caption 2</p>

</div>

<div class="float">

 <br>

 <p>caption 3</p>

</div>

<div class="spacer">

  

</div>

</div>

When the window is large enough,

When the window is small, the border of the dotted line also changes.