想在一行中显示4张图像，每个图像

Question

我特林实践表无设计下面的描述，我试图让下面的：每行

4张图片，并在每个图像都是图像的名称。

所以我的DOM：

<div id="images"> 
    <div class="imageblock"> 
      <div class="image"><a href=""><img src=""/></a></div> 
      <div class="meta">some filename</div> 
    </div> 
    <div class="imageblock"> 
      <div class="image"><a href=""><img src=""/></a></div> 
      <div class="meta">some filename</div> 
    </div> 
     .. 

</div> 

Answer 1

我的建议是：

使用UL和LI标签...

<ul class="gallery"> 
    <li> 
     <a href="http://www.rbacarin.com.br/novo-ka-st-2009/17042010207.jpg" class="thumb"><span><img src="17042010207_t.jpg" alt="Who we are" /></span></a> 
     <h2><a href="http://www.rbacarin.com.br/novo-ka-st-2009/17042010207.jpg">1</a></h2> 

    </li> 
... 
</ul> 

这个CSS：

ul.gallery { 
    width: 708px; 
    list-style: none; 
    margin: 0 auto; padding: 0; 
} 
ul.gallery li { 
    float: left; 
    margin: 10px; padding: 0; 
    text-align: center; 
    border: 1px solid #ccc; 
    -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/ 
    -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/ 
    -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/ 
    display: inline; /*--Gimp Fix aka IE6 Fix--*/ 
} 

为你可以在我的网站上看到，看看源代码： http://www.rbacarin.com.br/novo-ka-st-2009/salao-acessorios-2010-clube-do-novo-ka.html

Answer 2

#images { 
    width: 800px; 
    float: left; 
} 

.imageblock { 
    width: 200px; 
    float: left; 
} 

    .imageblock .image { 
    width: 200px; 
    float: left; 
    } 

    .imageblock .meta { 
    width: 200px; 
    float: left; 
    } 

未经检验的，但它很简单，所以应该工作。您会希望添加填充或边距，因为您认为它们适合将它们全部分离出来。

Answer 3

你用这个清单好得多。下面是一些代码，我为我的女儿网站实施：

<ul id="galleries"> 
    <li> 
     <a href="/gallery/image_full/6/"><img src="/img/gallery/May2010/with-daddy_thumb.jpg" class="border" width="200" height="200" border="0" title="With Daddy and his beard" /></a> 
     <p>With Daddy and his beard</p> 
    </li> 
    <li> 
     <a href="/gallery/image_full/8/"><img src="/img/gallery/May2010/with-mommy_thumb.jpg" class="border" width="200" height="200" border="0" title="Mommy and Me" /></a> 
     <p>Mommy and Me</p> 
    </li> 
    <li> 
     <a href="/gallery/image_full/7/"><img src="/imggallery/May2010/with-grandad_thumb.jpg" class="border" width="200" height="200" border="0" title="With Grandad" /></a> 
     <p>With Grandad</p> 
    </li> 
    <li> 
     <a href="/gallery/image_full/4/"><img src="/img/gallery/May2010/on-the-mat_thumb.jpg" class="border" width="200" height="200" border="0" title="On the mat" /></a> 
     <p>On the mat</p> 
    </li> 
</ul> 

CSS：

#galleries li 
{ 
    width:225px; 
    display:inline-block; 
} 
#galleries li p 
{  
    margin:10px 0 20px 0; 
}