想要用 HTML 和 CSS 模拟这种类型的 table

Question

我想为我自己的个人博客网站使用类似这种格式的内容。源代码没有给我很多关于如何编写这样的格式的提示。

我正在考虑以某种方式在 table 的每一行中使用 div 来执行此操作，但我知道有一种更简洁的方法可以做到这一点。有什么建议吗？

Answer 1

您的要求似乎很简单。你给出的例子在字体、粗细和颜色方面有很好的设计选择；但实际的标记不需要非常复杂。

它基本上是一堆 2 列行，每行的第一列包含 header 和日期，第二列包含摘要。以下 jsfiddle 执行此操作：https://jsfiddle.net/cxmgLctq/

html:

<div class="container">
  <div class="row">
    <div class="left">
      <h1>
      test
      </h1>
    </div>
    <div class="right">
      <h2>
      more information here.
      </h2>
    </div>
  </div>
  <div class="row">
    <div class="left">
      <h1>
      test
      </h1>
    </div>
    <div class="right">
      <h2>
      more information here.
      </h2>
    </div>
  </div>
</div>

和 css:

.row {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  width: 100%;
  height: 100px;

}

.left {
  float: left;
  width: 200px;
}

.right {
  float: left;
  width: 400px;
}

.container {
  width: 600px;
  height: 600px;
  margin: 20px
  display: block;
}

请注意，我没有真正尝试以任何方式设计它的样式。这种样式使您发布的示例看起来不错，而我制作的示例看起来很糟糕。此外，您可以使用大量库来实现此目的，或者确实像您建议的 table 一样，但是除了 div 之外，它完全可行。你应该做什么取决于你的情况。

想要用 HTML 和 CSS 模拟这种类型的 table

Want to emulate this type of table with HTML and CSS

html

css

blogs

jekyll