Хотите отобразить 4 изображения подряд с описанием под каждым изображением

Question

Я пытаюсь практиковать дизайн без таблиц, и я пытаюсь получить следующее:

4 изображения в строке , и под каждым изображением находится название изображения.

Итак, мой ДОМ:

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

Не проверено, но довольно просто, поэтому должно работать. Вы захотите добавить отступы или поля, как считаете нужным, чтобы немного отделить их.