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>

Answer 2

看看here。你只需要在你的div上应用最小高度。

Answer 3

你为什么不想使用桌子？在我看来，这是表格数据（诚然，图像是数据元素），所以表格不是显而易见的选择吗？

Answer 4

你可以使用像这样的列表元素

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

用css模仿表

4 个答案:

CSS：

HTML：