界面体验：右浮动 CSS！

引言

网页开发中的样式不仅仅有 .class 和 #id，HTML 的结构也很重要。 这篇文章将描述一位同事最近遇到的 UI 问题以及如何解决该问题。 假设您具备基本的 HTML 和 CSS 经验。

背景

下面是一个基本的例子，说明“Joe”需要完成什么

价格	20
税费	1.34
总计	21.34

这是一份关于购买的免责声明，
关于税费等等…

 

 

 

 

 

如您所见，左边是一个表格，右边是一个免责声明。 这是 Joe 希望的结果。 然而，他得到的是

价格	20
税费	1.34
总计	21.34

 

 

 

 

 

这是一份关于购买的免责声明，
关于税费等等…

上面显示了左边的表格和右边的免责声明，但免责声明显示在表格下方。 意图是让表格和免责声明内联显示。 应该如何修复？ 让我们先看看 Joe 的第一个 HTML 和 CSS 版本。 下面将描述 Joe 第一次开发用户界面的尝试。

尝试 #1 – 失败

当 Joe 第一次编写样式和 HTML 时，他考虑的是从左到右 (LTR) 的阅读方向，这是很自然的。 但问题在于这个页面没有任何自然之处。 下面是使用的 HTML 和 CSS

<style type="text/css">
.disclaimer
{
   float: right;
}
</style>
<div>
   <table>
      <tr>
         <td>Price</td>
         <td>20</td>
      </tr>
      <tr>
         <td>Tax</td>
         <td>1.34</td>
      </tr>
      <tr>
         <td>Total</td>
         <td>21.34</td>
      </tr>
   </table>
   <div class="disclaimer">
      <span>This is a disclaimer regarding purchases, tax, and the like...</span>
   </div>
</div>

这里，表格和免责声明包含在一个类名为“price-section”的 div 元素中。 表格的创建方式与往常一样，然后创建免责声明。 免责声明由一个类名为“disclaimer”的 div 元素组成，其中包含一个包含免责声明文本的内部 span 元素。 这里唯一应用的样式是 .disclaimer ，其中使用了 float:        right; 样式。 这实现了免责声明显示在页面右侧的基本需求。 然而，它也显示在表格下方。 幸运的是，有一个非常简单的解决方案！

尝试 #2 – 成功！

当 Joe 第一次编写样式和 HTML 时，他考虑的是从左到右 (LTR) 的阅读方向，这是很自然的。 但问题在于这个页面没有任何自然之处。 下面是他的标记的修改版本

<style type="text/css">
.disclaimer
{
   float: right;
}
</style>
<div>
   <div class="disclaimer">
      <span>This is a disclaimer regarding purchases, tax, and the like...</span>
   </div>
   <table>
      <tr>
         <td>Price</td>
         <td>20</td>
      </tr>
      <tr>
         <td>Tax</td>
         <td>1.34</td>
      </tr>
      <tr>
         <td>Total</td>
         <td>21.34</td>
      </tr>
   </table>
</div>

表格和免责声明像以前一样包含在一个 div 元素中。 区别在于免责声明是在表格之前创建的！ 这与从左到右 (LTR) 阅读方向和标记的层次结构之间的正常转换相冲突，但它与浏览器如何渲染标记以及应用 float: right; 样式有很大关系。

如您在下面的截图中看到的，之前的标记产生了预期的结果

价格	20
税费	1.34
总计	21.34

这是一份关于购买的免责声明，
关于税费等等…

结论

正如本文开头提到的，网页开发中的样式不仅仅有 .class 和 #id。 在这种情况下，Joe 的 HTML 文档中元素的顺序直接影响了所应用 CSS 的结果。 在遇到“样式”问题时，请记住这一点。