想在一行中顯示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; 
}