CSS还不能做什么？

【问题标题】：What can't be done in CSS yet?CSS还不能做什么？
【发布时间】：2010-10-03 08:57:26
【问题描述】：

不久前，我试图找出一种不使用表格布局的方法：

<table>
  <tr><td rowspan="2">Left column</td></tr>
  <tr><td>Right Top</td><td>Right bottom</td></tr>
</table>

最终我放弃了，并决定没有表格是不可能的（好吧，CSS 3 或许可以，但再等 5 到 10 年是不切实际的）。

有没有人有更多这样的例子？（或者更好，你能告诉我我错了吗？）

【问题讨论】：

只是为了给它一些关闭；我问这个问题已经 5-10 年了。几年前，Flexbox 解决了我最初的表格布局难题，但现在我们也有了 CSS Grid，它彻底解决了所有问题，几乎解决了下面的所有问题。似乎网页设计的黑暗时代已经结束了。

标签： html css layout html-table

【解决方案1】：

<div style='float:left;width:200px;height:300px;'>Left column</div>
<div style='margin-left:200px;'>
    <div>Right top</div>
    <div>Right bottom</div>
</div>

我想你想要这样的东西。请记住，css float 的能力是惊人的。这只是一个例子。

【讨论】：

所以现在你必须事先决定左列的宽度。你甚至可以用像素值来做。对不起，但不，谢谢..
这会让你得到两列，但它不会让两边都展开以垂直适应彼此。

【解决方案2】：

您可能想查看this question 的答案。为答案提交了一些有趣的 CSS 代码——包括一个解决了我以前从未见过的问题的构造。还有很多非常有用的链接。

【讨论】：

【解决方案3】：

有人回答了这个设计是否可行的问题。但是我有一个例子说明css无法完成的事情。出于某种原因，您需要明确设置表的cellspacing 和cellpadding。即使有margin 和padding 属性，也不能通过css 设置。这是我认为非常烦人的事情，因为我总是想通过 css 控制表格的边距和填充。

例如

<h1> This table won't have it's margin or padding reset </h1>
<table style="padding: 0; margin: 0;">
    <tr><td>a</td><td>b</td></tr> 
</table>

<h1> This table will... </h1>
<table cellspacing="0" cellpadding="0">
    <tr><td>a</td><td>b</td></tr> 
</table>

【讨论】：

那是因为您添加的样式特定于整个表格，而不是其中的单元格。但是，您可以为单个指定样式。
@Evan：不，你不能用于单元格间距。
但是每个 td 上的边距不是和 cellspacing 一样吗？
不能在css中设置border-collapse:collapse实现表格上面的效果吗？
@Spoike: table{border-spacing:0} td{padding:0} 就是你要找的东西。

【解决方案4】：

使用position 属性的另一种解决方案：

<style type="text/css">
    .outer {
        position: relative;
        background-color: #EEE;
    }
    .left-column {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: #F88;
    }
    .right-top {
        margin-left: 50%;
        background-color: #8F8;
    }
    .right-bottom {
        margin-left: 50%;
        background-color: #88F;
    }
</style>


<div class="outer">
    <div class="left-column">Left column</div>
    <div class="right-top">Right top</div>
    <div class="right-bottom">Right bottom</div>
</div>

【讨论】：

现在让它根据内容的大小改变列宽，就像没有宽度属性的表格一样。

【解决方案5】：

还有很多其他方法可以制作类似表格的布局。甚至还有CSS tables。真的，没有理由使用表格进行布局。永远。

目前不能做的事情是正确的text-align: justify; 连字符不能正常工作，但是通过使用软连字符，你可以让它表现得非常合适。

【讨论】：

【解决方案6】：

我在 CSS 中从未实现过的东西是垂直居中的图像。我总是以这样的方式结束（我讨厌）

<style>
  td.pic_frame {
    text-align:center;
    width:220px;
    height:220px;
    vertical-align:middle;
 } 
</style>
<table><tr><td class="pic_frame"><img ...></td></tr></table>

我刚刚按照 dylanfm 的建议使用 CSS 表格进行了尝试

<style>
  div.pic_frame{
    display:table-cell;
    text-align:center;
    width:220px;
    height:220px;
    vertical-align:middle;
  }
</style>
<div class="pic_frame"><img ...></div>

它在所有浏览器中都能完美运行，你猜对了，IE7

（在 Firefox、Safari、Opera、Chrome 和 IE7 中测试）

【讨论】：

【解决方案7】：

要回答标题中的问题，那些尴尬、很难或不可能做的事情：

变量和计算（表达式不计算在内，var 可以方便地处理颜色消毒等事情）
垂直居中
将维度设置为“剩余空间”（如表格中的“*”）
有效地混合相对单位和绝对单位（上述方法可以解决大部分问题）
圆角、渐变背景、投影等风格效果
文本中的空白控制
标准化的亚像素舍入（这不是直接的 CSS 问题，而是环境的结果）

为了公平起见，其中一些内容已被写入。

【讨论】：

这些都是很好的观点。我知道它们中的大多数在 CSS3 中都是可能的，但这正是我一直在寻找的东西。

【解决方案8】：

您可以将具有负边距的图像垂直居中。使用负边距将图像的“锚点”移动到其中心。然后将图像相对定位在中间。

800x800 图片示例：

#centered
{
    position:absolute;
    top:50%;
    left:50%;
    height:800px;
    width:800px;
    margin: auto;
    margin-top:-400px;
    margin-left:-400px;
}

【讨论】：

【解决方案9】：

这是一个不起眼的属性，但列表项标记的value 属性在 CSS 中没有替代品，即使它在 XHTML 1.0 Strict 中已被弃用，并且标准指示您改用 CSS。因此，以下内容无效：

<ol>
 <li>Item one</li>
 <li>Item two</li>
 <li value="4">Item four</li>
 <li>Item five</li>
</ol>

这让我在使用语义上有意义的代码的同时将某些法律文件放到网络上让我感到非常痛苦。

【讨论】：

【解决方案10】：

如果您编写一些 WPF 应用程序（编写 XAML 面板），那么您会希望通过窗口丢弃您找到的所有 html 和 css...

【讨论】：