gpt4 book ai didi

css - 使用 CSS,如何创建具有等宽列的两列网格 "only as narrow as required"?

转载 作者:行者123 更新时间:2023-11-28 09:59:12 27 4
gpt4 key购买 nike

假设我有一段 HTML 的结构如下:

<!-- 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 获得如下所示的演示文稿:

/* 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>

注意:

  1. 两列的宽度相同。
  2. 表格没有固定的宽度(例如 100% 或 300 像素),即它的宽度只是确保内容适合其单元格所需的宽度。 (或者换句话说:如果只有很少的内容,整个表格也会很窄。)
  3. 只有当整个网格太大而不适合包含 block (宽度方向)时,单元格内容才会换行。
  4. 我们必须假设不能在 HTML 代码中引入行。语义要求 HTML 代码以这种线性方式构建。 (不过,我们还是需要网格设计。)1

我能够通过几乎仅使用 CSS 的解决方案实现我的目标。但是,因为似乎没有Using CSS, how to add a pseudo element before every odd child element that is "outside" of that child element?的答案。我希望找到一种完全不同的方法来用纯 CSS 实现这一点。

所以我的问题归结为:是否有针对我的问题的纯 CSS(= 非 JavaScript)解决方案?


编辑: 1 如果需要,我们可以在每个单个元素周围添加额外的包装元素。但是,我们不能包装一组元素。

例如,我们可以包装每个 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>

但是我们不能包装元素组,所以这样的事情是不可能的:

<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>

最佳答案

自从 CSS Grid 得到更多支持后,现在才重新审视它。 CSS Grid 的一种解决方案是这样的:

.linkgrid {
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 10px;
row-gap: 10px;
}

.gridentry > * {
display: block;

padding: 10px;

text-align: center;

background-color: red;
color: white;

/* This is helpful if the texts get too long to break them "naturally": */
/* word-break: break-all; */
}
<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 - 使用 CSS,如何创建具有等宽列的两列网格 "only as narrow as required"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34566890/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com