背景

Question

背景

我正在尝试布置文章链接列表。每篇文章都有一个主题，一个图像和一个关于图像作者的小段落。

像这样：

+----------------+
| Article header |
+----------------+
|                |
|     Image      |
|                |
|          Credit|
+----------------+

我目前正在使用其中包含多个div元素的span。然后，这些span包含a，img和p。

问题

该页面无效HTML5。

显然span内部不能有p。

我不想使用table即使我90年代的HTML知识促使我这样做。 table也不会解决我的问题，因为我想要一个不均匀的文章链接数量来自然地排序，而不是从左到右。像这样的五篇相关文章就像这样：

+------+  +------+
|      |  |      |
|      |  |      |
+------+  +------+
+------+  +------+
|      |  |      |
|      |  |      |
+------+  +------+
     +------+
     |      |
     |      |
     +------+

如果有人调整窗口大小，文章链接应该折叠成一列。我也可能想要更改文章或其父容器的宽度，以在一行中创建三个文章链接。

问题

我应该使用哪些标记类型来确保我的HTML代码是有效的HTML5并且对这些元素的默认样式的更改很少？

附录

我对使用客户端JavaScript库解决任何问题不感兴趣。我的页面很小，应该加载速度很快，选择标签的问题应该在页面的静态HTML内容中解决，而不是在页面加载后。

Answer 1

Flexbox容器将完全按照您刚才描述的方式执行。我做了一个JFiddle here来完成你的要求。只要将内容与可用空间更改对齐，flexbox就可以比表更灵活，并且可以很好地折叠到单个列中。

以下是我用来完成此任务的代码：

HTML

<div id="container">
  <div class="article">
    <span>Article 1</span>
    <div class="image" id="blue">    
    </div>
    <p>
    Credits
    </p>
  </div>
  <div class="article">
    <span>Article 2</span>
   <div class="image" id="red">    
    </div>
    <p>
    Credits
    </p>
  </div>
  <div class="article">
    <span>Article 3</span>
   <div class="image" id="green">   
    </div>
    <p>
    Credits
    </p>
  </div>
  <div class="article">
    <span>Article 4</span>
   <div class="image" id="blue">   
    </div>
    <p>
    Credits
    </p>
  </div>
</div>

CSS

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.article {
  display: flex;
  flex-flow: column;
  width: 400px;
}
.article span, .article p {
  text-align: center;
}
.article div {
  margin: auto;
}
.image {
  width: 200px;
  height: 200px;
}
#blue {
  background: blue;
}
#red {
  background: red;
}
#green {
  background: green;
}

当然，您可以替换我用于图像的彩色div元素。您可以考虑在这里阅读flexbox：https://developer.mozilla.org/en-US/docs/Web/CSS/flex。该文章中的Webkits应该包含在不同的浏览器中。

Answer 2

使用elemment ul和li with display inline-table。

<div>
  <ul>
    <li>Header</li>
  </ul>
  <ul>
    <li style="display:inline">Col 1</li>
    <li style="display:inline">Col 2</li>
  </ul>
  <ul>
    <li>Credit</li>
  </ul>
</div>

我建议您使用bootstrap让这项工作更轻松;

用于自动排列框的HTML标记

背景

问题

问题

附录

2 个答案: