Question

我正在尝试无桌面设计，我试图获得以下内容：

每行4张图片，每张图片下方都是图片名称。

所以我的DOM：

3 个答案:

答案 0 :(得分：3)

答案 1 :(得分：1)

答案 2 :(得分：0)

Answer 1

为此使用列表要好得多。这是我为女儿网站实施的一些代码：

<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;
}

Answer 2

我的建议是：

使用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 3

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

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

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

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

未经测试，但它非常简单，所以应该工作。您可能希望根据需要添加填充或边距，以便将它们全部分开。

想要连续显示4个图像，每个图像下方都有一个描述

3 个答案: