2

我花了一点时间试图弄清楚如何在不使用表格的情况下实现以下效果但无法弄清楚：http: //jsfiddle.net/sKFzA/

CSS：

.header{width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{width:99%;}
.dateCol{vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}

HTML：

<table class="header">
<tr>
    <td class="titleCol">This is the blog title</td>
    <td class="dateCol"> <span>&nbsp;</span><span class="dateText">1/23/2012</span>

    </td>
</tr>
</table>

为了解释它，我有一个博客标题和一个博客日期。标题可能很长而且很长。在最后一行的末尾，无论是否包裹，我都希望博客日期与右侧对齐。

所以我有两个问题。有什么理由不为此使用表格吗？如果是这样，您将如何在不假设静态字体大小的情况下实现它？

4

4 回答 4

2

CSS 具有允许任何元素表现得像表格的特定组件的属性。

http://cssdeck.com/labs/rjiesryc

<header>
  <h1>This is the blog title</h1>
  <time datetime="2012-01-23">1/23/2012</time>
</header>

CSS

 header {
      display: table;
      width: 100%;
    }

    header h1, header time {
      display: table-cell;
    }

    header time {
      /*vertical-align: bottom;*/
    }
于 2013-06-18T17:58:10.230 回答
2

在 cimmanon 和其他人的帮助下，我收集到：

  1. 在这里不使用表格的唯一原因是，从技术上讲，布局并不是表格的预期用途，而且通过不使用表格，您可以将布局 (CSS) 与标记 (HTML) 分开。但是，如果我要使用一张桌子，我不知道有任何负面影响。

  2. 没有表格的概念似乎没有很好的解决这种精确布局的方法，但是我的表格解决方案可以在不使用 HTML 表格的情况下通过应用样式将其他元素显示为表格来实现。所以我用 div 替换了我的表格元素。日期前有空格的跨度允许较小的日期与标题的基线保持对齐，而无需硬编码行高或字体大小。因此，如果字体大小发生变化，我不必担心更新围绕它们硬编码的任何其他幻数。

http://jsfiddle.net/K35gT/

HTML

<div class="header">
    <div class="titleCol">This is the blog title</div>
    <div class="dateCol">
        <span>&nbsp;</span><span class="dateText">1/23/2012</span>
    </div>
</div>

款式：

.header{display:table;width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{display:table-cell;width:99%;}
.dateCol{display:table-cell;vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
于 2013-06-18T19:17:48.740 回答
0

您根本不需要表格，只需使用正确样式的块元素。

如果是我的网站，我会这样做：

<header>
  <h1>This is the blog title</h1>
  <time datetime="2012-01-23">1/23/2012</time>
</header>

结合这个CSS：

header {position:relative; width:100%; font:25px Arial,Helvetica,sans-serif;}
header > h1 {margin:0px;}
header > time {display:block; font-size:12px; text-align:right;}

您可以决定是否要使用 HTML5 元素或通用元素，以及是否要挂钩类名。这是上面的 jsFiddle：http: //jsfiddle.net/sKFzA/13/

于 2013-06-18T17:34:26.863 回答
0

像这样的东西？我希望我说对了。

HTML：

<div id="titleRow">This is the blog title</div>
<div id="dateText"><span id="spandate">1/23/2012</span></div>

CSS：

   #titleRow{width:80%; height: 25px; font:25px Arial,Helvetica,sans-serif; 
   float:left;text-align: left;}
   #dateText{width:20%; height: 25px; font-size:12px;float:left; text-align: right; position: relative;}
   #spandate { position: absolute; bottom: 0; right: 0;}

见这里：http: //jsfiddle.net/sKFzA/31/

于 2013-06-18T17:34:56.347 回答