HTML+CSS模板:查询列表

Question

我正在尝试为我一直在处理的常见HTML + CSS任务开发一些模板。其中之一是一般的“查询列表”(??)无论是来自客户端还是服务器端。

到目前为止，我使用的是以下可重用代码，这些代码似乎运行良好，没有任何明显的错误：

​

/* Query List */

ul.query-list {
  list-style-type: none;
  min-width: 340px;
}

ul.query-list li {
  height: 5.7em;
  margin: 10px 0;
  font-size: 12px;
}

ul.query-list li a {
  text-decoration: none;
  display: flex;
  height: 100%;
}

ul.query-list li a:hover {
  background-color: #fafafa;
  opacity: 0.7;
}

ul.query-list li a:hover .title-container {
  text-decoration: underline;
}

ul.query-list .image-container {
  flex-shrink: 0;
  height: 100%;
  width: 5.7em;
  margin-right: 5px;
}

ul.query-list .text-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

ul.query-list .title-container {
  overflow: hidden;
  margin-bottom: 0.2em;
}

ul.query-list .title-container .no-title {
  color: darkgray;
  font-weight: bold;
}

ul.query-list .notes-container {
  flex-shrink: 0;
  flex-grow: 0;
  height: 1.1em;
  overflow: hidden;
}

ul.query-list .notes-container p {
  color: darkgray;
  text-align: left;
}

.query-list p,
h3 {
  margin: 0;
  line-height: 1.1em;
  font-size: 12px;
  text-align: left;
  font-family: arial;
}

.query-list span {
  white-space: nowrap
}


/* General Definitions */

.icon-img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

h3 {
  color: darkblue;
}

<ul class="query-list">
  <li>
    <a href="dummy_page1.html">
      <div class="image-container">
        <img class="icon-img" src="img_100x100.png">
      </div>

      <div class="text-container">
        <div class="title-container">
          <h3 title="dummy title">[Dummy Title] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis accumsan felis. Maecenas vel libero mi. Suspendisse potenti. Sed tempus ex eu diam imperdiet mattis ac ut orci. Sed non lectus libero. Suspendisse vitae
            nunc a quam mattis congue id eget tortor. Vivamus id arcu eros. Duis eu risus semper, dapibus quam in, tristique magna. Duis semper tempus dolor eget elementum. Duis arcu ipsum, suscipit a egestas quis, lobortis sit amet purus.</h3>
        </div>

        <div class="notes-container">
          <p>
            <span>dummy notes 1</span>
            <span>&bull; dummy notes 2</span>
            <span>&bull; dummy notes 3</span>
          </p>
        </div>

        <div class="notes-container">
          <p>
            <span>dummy notes 4</span>
            <span>&bull; dummy notes 5</span>
            <span>&bull; dummy notes 6</span>
          </p>
        </div>
      </div>
    </a>
  </li>
</ul>

​

该守则的一些主要特点是：

• 文本内容最多有5行(标题+注释)，与文本内容的数量无关。
• 除了标题行的数目之外，注释总是会立即下垂(没有可变的差距)。
• 标题行的最大数目根据包括或删除的注释行数自动调整。

问题

1. 对于这样一个简单的任务，在我看来，有一个<div>、<a>和flexbox的巢过于复杂。可以简化吗？
2. 这一问题是否有标准的名称？“confusing”似乎有点令人困惑。

Answer 1

我认为你指的是搜索结果(查询列表)。通过将其添加到无序列表中，并使用CSS将其分解为列，您肯定可以简化备注部分。您也不需要将整个结构包装到一个列表中，只需使用包装器div即可。

列中无序列表的示例：

<div class="notes-container">
  <ul>
    <li>dummy notes 1</li>
    <li>dummy notes 2</li>
    <li>dummy notes 3</li>
    <li>dummy notes 4</li>
    <li>dummy notes 5</li>
    <li>dummy notes 6</li>
  </ul>
</div>

ul {
  -moz-column-count: 5;
  -moz-column-gap: 5px;
  -webkit-column-count: 5;
  -webkit-column-gap: 5px;
  column-count: 5;
  column-gap: 5px;
  margin: 0px;
  padding: 0px 0px 0px 10px;
}

这里是一个简化结构和CSS的小提琴。