Have Geek Brain

Thumbnail gallery height issue

I have this YouTube video thumbnail gallery with their title. http://skitch.com/subzane/bqgqw/demo

The problem is that when you move them, they don't appear the way I like, because the height is variable. I read a blog post a few weeks ago only solving this problem, but I can't find it anywhere.

So, I'm asking for a link to this blog post or its content :)

  • The height of the thumbnails can change, I cannot set it to a fixed height.
  • The number of presses for each line is different. I cannot set a fixed number.
  • no javasscript fixes. only css.

thanks

0


source to share


3 answers


OK. After several hours of surfing the internet, I found what I was looking for.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/



It is display usage: inline-block that solves my problem.

0


source


instead of floating divs, you can switch thumbnails into lists (which is actually more semantically correct).

For example:



<style type="text/css">

ul {
    list-type: none;
}

li {
    display: inline;
}
li img {
    vertical-align: top;
    margin-left: 5px;
    padding-bottom: 5px;
}

</style>

<div style="width: 280">
    <ul>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    </ul>
</div>

for more help, visit http://www.alistapart.com/articles/practicalcss/

+1


source


How much will the height change? If it doesn't change a lot, then just set the height as maximum?

For browsers that support inline block:

Although here's the built-in block cross-browser article

#thumbsWrapper div{display:inline-block;vertical-align:top;margin:20px;border:solid 1px #f00;width:180px;}

<div id="thumbsWrapper">
  <div style="height:180px;">
    <img src="thumbnail1.gif" />
  </div>
  <div style="height:240px;">
    <img src="thumbnail2.gif" />
  </div>
  <div style="height:210px;">
    <img src="thumbnail3.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail4.gif" />
  </div>
  <div style="height:300px;">
    <img src="thumbnail5.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail6.gif" />
  </div>
</div>
0


source






More articles:


All Articles