имитировать таблицу с помощью CSS

Question

Я пытаюсь отобразить сетку элементов, каждый элемент имеет фотографию слева и описание справа, что-то вроде этого:

----------------------------
| photo | item description |
----------------------------

Я хочу отобразить эти элементы в сетке 3х3 на странице. У меня решена часть сетки, с чем у меня проблемы - выравнивание фотографии и описания. Когда высота описания превышает высоту фотографии, я не хочу, чтобы текст переносился под фотографию. По сути, я хочу сохранить два отдельных столбца.

Я пробовал это:

.item{
  padding-left: 60px; // size of photo + 5px margin
  background-position: 5px 0px;
}

<div class="item" style="background-image: url('/img/photo123.jpg');">
  Here is the item description
</div>

Это сработало очень хорошо. разметка чистая, и мне не нужно возиться с абсолютным / относительным, однако теперь я не могу добавить границу к изображению. Кто-нибудь может предложить обходной путь или альтернативу?

Answer 1

ИМХО, что не чисто. Это, очевидно, содержательные изображения, поэтому они не должны быть фоновыми изображениями.

Обычно это очень просто с плавающей точкой, но есть несколько других способов.

CSS:

.item img {
  float: left;
}

.item p {
  margin-left: 60px; // size of photo + 5px margin
}

HTML:

<div class="item">
    <img src='/img/photo123.jpg'> <!-- Add width/height and alt text -->
    <p>Here is the item description</p>
    <div style="clear:left"></div>
    <!-- or any other clearing solution, for example, "clearfix" -->
</div>

Answer 2

вы можете использовать элементы списка, например, так:

<ul>
    <li>Description</li>
    <li class="image">Image</li>
    <li>Description</li>
    <li class="image">Image</li>
    <li>Description</li>
    <li class="image">Image</li>
    <li>Description</li>
    <li class="image">Image</li>
    <li>Description</li>
    <li class="image">Image</li>
    <li>Description</li>
    <li class="image">Image</li>
    <li>Description</li>
    <li class="image">Image</li>
    <li>Description</li>
    <li class="image">Image</li>
    <li>Description</li>
    <li class="image">Image</li>
</ul>

и CSS

ul {width: 960px; font-family: Arial; font-size: 12px; float: left;}
ul li {width: 80px; height: 180px; padding: 10px; background: #444444; list-style: none; float: left; color: #cccccc; }
ul li.image {width: 180px; height: 180px; padding: 10px; background: #cccccc; margin: 0 20px 20px 0; color: #444444; }

Answer 3

Почему вы не хотите использовать стол? Мне кажется, это табличные данные (по общему признанию, когда изображение является элементом данных), поэтому не будет ли таблица очевидным выбором?

Answer 4

Посмотрите здесь .Вам просто нужно применить минимальную высоту к вашему div.