用css模仿表

Question

我正在尝试显示一个项目网格,每个项目左边有一张照片,右边有一个描述,如下所示:

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

我想在页面上的3x3网格中显示这些项目.我有网格部分,我遇到的问题是照片和描述的对齐.当描述的高度超过照片的高度时,我不希望文本包裹在照片下面.我基本上想要维护两个单独的列.

我试过这个:

.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>