Question

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

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

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

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

Answer 1

要回答标题中的问题，那些尴尬，非常困难或无法做到的事情：

变量和计算（表达式不计算，vars对于颜色消毒这样的事情很方便）
垂直居中
将尺寸设置为“剩余空间”（如表中的“*”）
有效地混合相对和绝对单位（以上将解决大部分问题）
圆角，褪色背景，阴影等风格效果
文字中的空格控件
标准化的子像素舍入（这不是CSS问题，而是环境的结果）

这些东西中的一部分是为了将来已经公平。

Answer 2

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

Answer 3

如果设计可行，有人回答了这个问题。但我有一个用css无法做到的事情的例子。出于某种原因，您需要明确设置表格cellspacing和cellpadding。即使存在margin和padding属性，也无法通过css进行设置。这是我认为令人难以置信的烦恼，因为我总是希望通过css控制表格上的边距和填充。

E.g。

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

Answer 4

<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能力是惊人的。这只是一个例子。

Answer 5

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

Answer 6

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

目前无法完成的事情是正确的text-align: justify;连字符不能正常工作，但使用软连字符可以使其表现得非常恰当。

Answer 7

我在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中测试）

Answer 8

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

800x800图像示例：

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

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

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

Answer 10

如果您编写了一些WPF应用程序（编写XAML面板），那么您希望窗口中的所有html和css都能找到...

CSS中还有什么不能做的？

10 个答案: