html - 使用 HTML/CSS 在图像和文本周围创建大小统一的框

Question

有没有一种方法可以使用 HTML/CSS 在图像和文本周围创建大小统一的框？

我正在尝试创建一排这样的框:http://i.imgur.com/Bdzoay0.png但我不知道从哪里开始。

我已经尝试让 boxes 以内联无序列表的形式列出元素:

HTML:

<ul>
  <li class = "projbox">
    <img src="example1.jpg" width="141" height="200" />
    <p>This is text</p>
    <p>This is some more text</p>
    <p>more and more text</p>
  </li>
  <li class = "projbox">
    <img src="example2.jpg" width="141" height="200" />
    <p>This is text</p>
    <p>This is some more text</p>
    <p>more and more text</p>
  </li>
</ul>

CSS:

li.projbox {
  border: 30px solid #FFFFFF;
  background-color: #FFFFFF;

  list-style: none;
  display: inline;
  margin-right: 25px;
  padding: 15px;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
}

但是这个框看起来非常畸形，除了图像的左下角外什么都没有包围，而且段落文本根本没有背景。

我应该用 table 代替来存放盒子吗？最终，我希望能够使框水平滚动。

Answer 1

这样的事情怎么样:

标记:

<ul>
  <li class="projbox">
    <img src="http://placehold.it/330x460" width="330" height="460" />
    <h2>This is text</h2>
    <p>This is some more text</p>
    <p>more and more text</p>
  </li>
  <li class="projbox">
    <img src="http://placehold.it/330x460" width="330" height="460" />
    <h2>This is text</h2>
    <p>This is some more text</p>
    <p>more and more text</p>
  </li>
</ul>

CSS:

body {
    background: #eee;
}
ul  {
    list-style: none;
    font-family: arial, sans-serif;
    color: #999;
    margin: 0;
    padding: 0;
}
.projbox {
    padding: 40px 30px;
    background-color: #fff;
    margin: 10px;
    display: inline-block;
    box-sizing: border-box;
    height: 600px;
    width: 390px;
}
.projbox img {
    border: 1px solid #00f;
}

.projbox h2 {
    font-weight: normal;
    letter-spacing: 1px;
    font-size: 1.1em;
    margin: 0.2em;
}
.projbox p {
    font-size: 1em;
    margin: 0.2em;
}

我们正在玩的是改变无序列表的正常显示。为此，我们需要删除标准边距和填充，并应用我们自己的。有些人使用 CSS 重置来做到这一点，例如 Eric Meyer's .这也使用 inline-block 的 display 值来创建统一 block 。查看更多about display here .

在实现此类设计时，还有一个关于“统一”的问题。您将占位符文本作为 3 条短线，这很好，假设您确实拥有该控制权。根据我的经验，像这样的元素往往会被重复使用，因此您需要考虑如果行变长或跨越多行会发生什么。您可能想在这些框上设置高度。这涉及网页设计师需要了解的内容，例如 box model。 .

我还把它实现为一个 jsfiddle:http://jsfiddle.net/artlung/5V65t/