Question

我花了一些时间试图弄清楚如何在不使用表格的情况下实现以下效果，但无法弄明白：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>

为了解释它，我有博客标题和博客日期。标题可能很长并且包装。在最后一行的末尾，包装与否，我希望博客日期与右边对齐。

所以我有两个问题。有没有理由不为此使用表格？如果是这样，如果不假设静态字体大小，你会如何实现呢？

Answer 1

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;*/
    }

Answer 2

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

这里不使用表的唯一原因是因为布局在技术上不是表的预期目的，也不使用表，您可以将布局（CSS）与标记（HTML）分开。但是，如果我使用桌子，我不知道有任何负面影响。
如果没有表的概念，这个确切的布局似乎没有一个好的解决方案，但是我的表解决方案可以在不使用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;}

感谢您的帮助＆amp;输入

Answer 3

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

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

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

Answer 4

这样的东西？我希望我帮到你。

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

右对齐文本在行尾没有表格

4 个答案: