使用CSS，如何创建一个具有“只有所需宽度”的等宽列的双列网格？

本文介绍了使用CSS，如何创建一个具有“只有所需宽度”的等宽列的双列网格？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我有一个HTML结构如下：

Assuming I have a piece of HTML that is structured like this:

<!-- MY ACTUAL HTML -->

<div class="linkgrid">
  <div class="gridentry">
    <a href="#">Loooooooooooooong</a>
  </div>
  <div class="gridentry">
    <a href="#">Short</a>
  </div>
  <div class="gridentry">
    <a href="#">Meeeedium</a>
  </div>
</div>

...我想使用CSS来获得如下的演示文稿：

...I'd like to make use of CSS to get a presentation that looks like this:

/* DEMONSTRATION-ONLY CSS */

table {
  table-layout: fixed;
}

td {
  width: 50%;
  padding: 1em;

  background-color: red;
  text-align: center;
}

td a {
  color: white;
}

<!-- DEMONSTRATION-ONLY HTML -->

<table>
  <tr>
    <td><a href="#">Loooooooooooooong</a></td>
    <td><a href="#">Short</a></td>
  </tr>
  <tr>
    <td><a href="#">Meeeedium</a></td>
  </tr>
</table>

这两列的宽度相同。

表格没有固定宽度例如像100％或300px），即，它只有所需的宽度，以确保内容适合其单元格。（或者换句话说：如果只有很少的内容，整个表格也会很窄。）

单元格内容只会包装，如果它会使整个网格太大以适应包含块（宽度方向）。

我们假设不能在HTML代码中引入行。语义要求HTML代码以这种线性方式结构化。（但是，我们还需要一个网格设计。）

The columns both have the same width.
The table does not have a fixed width (e.g. like 100% or 300px), i.e. it is only as wide as required to make sure that the content fits into its cells. (Or to put it differently: If there is only little content, the whole table will also be pretty narrow.)
The cell content will only wrap if it would make the whole grid too large to fit into the containing block (width-wise).
We have to assume that rows cannot be introduced in the HTML code. The semantics require the HTML code to be structured in this linear fashion. (However, we still need a grid design.)

几乎只有CSS的解决方案。但是，因为似乎没有回答我希望找到一个完全不同的方法来实现纯CSS。

I was able to reach my goal with an almost CSS-only solution. However, because there does not seem to be an answer to Using CSS, how to add a pseudo element before every odd child element that is "outside" of that child element? I hope to find a completely different approach to realize this with pure CSS.

所以我的问题归结为：有一个CSS -only（=非JavaScript）解决方案我的问题？

So my question boils down to: Is there a CSS-only (= non-JavaScript) solution for my problem?

EDIT： > 1 如果需要，我们可以在每个单个元素周围添加额外的包装元素。但是，我们不能包装一组元素。

If it is required, we could add additional wrapping elements around each single element. However, we cannot wrap a group of elements.

因此，我们可以例如包装每个 gridentry ：

So we could for example wrap each gridentry:

<div class="linkgrid">
  <div class="wrapper">
    <div class="gridentry">
      <a href="#">Loooooooooooooong</a>
    </div>
  </div>
  <div class="wrapper">
    <div class="gridentry">
      <a href="#">Short</a>
    </div>
  </div>
  <div class="wrapper">
    <div class="gridentry">
      <a href="#">Meeeedium</a>
    </div>
  </div>
</div>

但是我们不能封装元素组，所以这样的东西是不可能的：

But we cannot wrap groups of elements, so something like this would not be possible:

<div class="linkgrid">
  <div class="wrapper">
    <div class="gridentry">
      <a href="#">Loooooooooooooong</a>
    </div>
    <div class="gridentry">
      <a href="#">Short</a>
    </div>
  </div>
  <div class="wrapper">
    <div class="gridentry">
      <a href="#">Meeeedium</a>
    </div>
  </div>
</div>

推荐答案

，我成功地找到了解决方案：

After fiddling around with this for quite a while and getting a very helpful answer to another question that was related to this one, I managed to finally find a solution:

.linkgrid {
  max-width: 50%;
  display: table;
}

.gridentry:nth-child(odd) {
  float: left;
  width: 100%;
}

.gridentry:nth-child(even) {
  width: 100%;
  margin-left: 100%;
  margin-right: -100%;
}

.gridentry:nth-child(even):after {
  content: '';
  display: block;
  clear: left;
}

.gridentry > * {
  display: block;

  margin-bottom: 10px;
  padding: 10px;

  background-color: red;
  text-align: center;

  /* This is helpful if the texts get too long to break them "naturally": */
  /* word-break: break-all; */
}

.gridentry:nth-child(odd) > * {
  margin-right: 5px;
}

.gridentry:nth-child(even) > * {
  margin-left: 5px;
}

.gridentry a {
  color: white;
}

<div class="linkgrid">
  <div class="gridentry">
    <a href="#">Loooooooooooooong</a>
  </div>
  <div class="gridentry">
    <a href="#">Short</a>
  </div>
  <div class="gridentry">
    <a href="#">Meeeedium</a>
  </div>
  <div class="gridentry">
    <a href="#">Short</a>
  </div>
  <div class="gridentry">
    <a href="#">Short</a>
  </div>
</div>

这篇关于使用CSS，如何创建一个具有“只有所需宽度”的等宽列的双列网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！