【问题标题】:CSS Table-Like alignment using no tables? (CSS RelativeLayout)CSS Table-Like 对齐不使用表格? (CSS 相对布局)
【发布时间】:2013-04-08 12:49:19
【问题描述】:

无论我去哪里上网,我都会不断地感到我不应该使用表格。可悲的是,我是少数几个顽固地仍在使用它们的程序员之一——坦率地说,我发现 CSS 的对齐和布局功能对我来说不够强大,冷火鸡,停止使用表格。撇开我个人的程序员特质不谈,我想尝试解决我对 CSS 系统的主要不满之一:

假设我想要这样的布局:

+---+---+
| A | B |
+---+---+
| C | D |
+---+---+

在上面的例子中,我希望 A 和 C 的宽度相同,BD 的宽度保持相同。

我还希望AB 的高度保持锁定在一起,并且我希望C 和D 的高度保持彼此相同。

为了澄清,如果列中的任何元素变宽,我希望该列中的 所有 元素变宽。如果一行中的任何元素变高,我再次希望同一行中的所有元素也变宽。

我刚才描述的是我们的老朋友桌子的确切功能。在我看来,表格对于这些类型的布局非常有用!如果我尝试使用 CSS 布局进行类似的操作,我可能会得到这样的结果:

+-------+---+
|   A   | B |
+---*---*---+
| C |   D   |
+---+-------+

这将非常不是是我正在寻找的那种布局。 (AC 制作锯齿列,而不是我喜欢的完美、平滑的列)

简单地说,我可以真的使用一种方法,使用 CSS 布局(而不是预定义的宽度或高度)将一个 CSS 框的边缘位置与不同 CSS 框的边缘。如果 CSS 支持这一简单功能,我可以立即永远放弃表格,并创建超出表格功能的布局!这种力量的一个很好但无用的例子是桌子两侧的两个断开连接的盒子,动态彼此共享完全相同的高度和垂直位置。

但不幸的是,在我在 Internet 上进行的搜索中,迄今为止我发现的最高级对齐方式是居中、左对齐和右对齐。所有与其他元素不相关的对齐类型,使它们无用。

我想要的只是一种无需使用表格就能将 HTML 元素与其他 HTML 元素对齐的方法!

编辑

在为这个问题选择标签时,我遇到了一个几乎总结了所有内容的描述:

Relativelayout: 一个布局,其中孩子的位置可以是 描述彼此之间或与父母之间的关系。

是否有 CSS 相对布局?还是我想这样做时都卡在使用表格?

我会接受最接近我想要的功能的答案,而不使用预定的宽度或高度(如果没有其他人提供更好的东西,包括答案“没有类似的东西存在”)。

【问题讨论】:

  • 人们总是误会:这正是表格有意义且应该使用的情况。试图在纯 CSS 中模仿他们的行为是没有意义的。出于布局目的,在很多情况下应避免使用表格,但并非总是如此。
  • 如果你真的想要一张桌子,那么一张桌子就是答案。但是,问题是您为什么绝对想要这种行为?这意味着在某些情况下,人们认为他们想要一个表格,但实际上响应式 css 解决方案可能同样好,甚至更好。

标签: css alignment


【解决方案1】:

可以将元素显示为在语义上不是表格的表格,仅使用 CSS。使用 display 属性,您可以在标记中有 div 时模仿表格。 Check this article.

根据您想要实现的目标,有一些替代选项。如果您只希望每列中的两行与列的宽度一致,则应尝试将行放在列标记内,而不是相反。这是在没有预定义尺寸的情况下工作的。

此外,如果为一行中的每个单元格设置相同的高度,您可以简单地将它们浮动到左侧,并将容器宽度设置为行宽的总和。这仅适用于预定义的尺寸。

CSS

div.c
{
    width: 100%;
}

div.c>div:nth-child(2n-1)
{
    width: 25%;
    float: left;
    background: blue;
}

div.c>div:nth-child(2n)
{
    width: 75%;
    float: left;
    background: yellow;
}

这是一个小提琴:http://jsfiddle.net/kdani3/DbRuV/

一个更复杂的例子:http://jsfiddle.net/kdani3/DbRuV/1/

我觉得真的很简单,甚至比使用表格布局还要简单。

另外,我真的建议你看看 CSS 网格框架,比如 Twitter Bootstrap。这绝对值得一看。

【讨论】:

  • 表格的一个好处是不必指定宽度,因为 OP 说如果需要,列会增加它的大小(在每一行上)(无需指定宽度)。您的示例未提供此基本表格功能。
  • 是的。这就是我推荐 Bootstrap 和 display: table; 的原因。但是,在大多数情况下,我的例子就足够了。如果您可以至少在几个元素上附加预定义尺寸,那么就有了解决方案。如果你不能,display:table; 就是答案。
  • 当然,如上所述,在实际表格的情况下,使用表格标签是语义正确的解决方案。表格应该看起来像表格,并且在标记中应该是语义的。这就是为什么我不喜欢复制表格布局的布局。表格应该看起来像表格,布局不应该。当然,在极少数情况下,表格布局看起来更好,在这些情况下,我推荐使用 display 属性。
  • 您好!您的回答很聪明,在某些情况下,我确实可以将列作为父母,而不是行。但是,在某些情况下,我需要 both 对齐。可悲的是,这样的解决方案将不起作用:( 使用预先确定的宽度也不是选项。使用 Twitter Bootstrap 很有趣,尽管我想知道是否有比限制为 12 个预先确定的列更强大的东西。不过,赞成你的答案,因为内容丰富
  • display 属性怎么样?请检查我在回答中提到的文章。我认为使用 display 属性可以很好地解决您的问题。
【解决方案2】:

我认为使用纯 CSS,没有Width,也没有使用table,你可以使用Flex Layout

这是代码

HTML

<section class="flexrow">
    <div class='item'>1asdf</div>
    <div class='item'>2</div>
</section>
<section class="flexrow">
    <div class='item'>1</div>
    <div class='item'>2</div>
</section>

CSS

.flexrow {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    margin-bottom: 10px;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-flex: none;
    -moz-flex: none;
    -ms-flex: none;
    -o-flex: none;
}
.item {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    margin: auto 10px;
    border-radius: 5px;
    border:1px solid black;
}

这里是JsFiddle

【讨论】:

  • 您的回答听起来很有希望!我尝试在每晚构建的 firefox 中查看您的示例,但它不起作用(flex 行似乎更像是直接在彼此之上的列)。即使将示例中的 div-flexrow 更改为 section-flexrow,它仍然无法正常工作。您介意让我知道您使用的是什么浏览器,以便我可以直接看到示例吗?谢谢!
  • 我使用的是谷歌浏览器,我已经在jsfiddle中发布了我的例子,链接在上面
  • 啊!在 Chrome 中运行您的示例现在可以工作了。不幸的是,我修改了它(有更多的 f,并且在最后五个左右 f 之前有一个
    标签)。它不会在相同的列/行中保持与其兄弟姐妹相同的列大小(或行大小)。虽然这是一个有趣的布局策略,但如果它不能动态保持对齐,我不确定它是否会做与表格相同的技巧。我的问题在这里得到证明:i.imgur.com/Jf5T6j3.png
猜你喜欢
  • 1970-01-01
  • 2012-04-16
  • 2010-10-16
  • 1970-01-01
  • 1970-01-01
  • 2013-07-13
  • 2018-10-13
  • 2021-01-30
  • 1970-01-01
相关资源
最近更新 更多