6

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

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

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

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

4

10 回答 10

4

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

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

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

于 2009-01-26T10:58:51.133 回答
2

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

于 2009-01-24T23:03:28.247 回答
2

有人回答了这个设计是否可行的问题。但是我有一个用css无法完成的例子。cellspacing出于某种原因，您需要cellpadding明确设置表格。margin即使有andpadding属性也不能通过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>
于 2009-01-24T23:06:53.497 回答
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>

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

于 2009-01-24T23:00:03.277 回答
1

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>
于 2009-01-24T23:50:54.267 回答
1

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

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

于 2009-01-24T23:51:43.610 回答
1

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

于 2009-01-26T10:32:48.487 回答
0

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

800x800 图像示例：

#centered
{
    position:absolute;
    top:50%;
    left:50%;
    height:800px;
    width:800px;
    margin: auto;
    margin-top:-400px;
    margin-left:-400px;
}
于 2009-01-28T11:05:23.507 回答
0

这是一个不起眼的属性，但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>

这让我在使用语义上有意义的代码的同时将某些法律文件放到网络上让我很伤心。

于 2009-02-25T22:48:03.130 回答
0

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

于 2009-02-25T22:51:23.293 回答