html - 如何在同一包含元素中以不同方式内联对齐文本 block ？

Question

我有一个 <div>包含两个文本 block 的元素。第一个 block 在元素的中心对齐，我想将第二个 block 向右对齐。

可以看到我尝试执行此操作的页面 here .

我尝试创建一个内部 <div>页脚中的元素， float 第二个文本 block 并应用 float: right给它。此解决方案的问题是，文本优先(居中)文本元素现在在剩余空间的中心对齐，减去 float <div> 的宽度。 , 而不是以包含元素为中心。

这是我试过的代码:

<div id="footer">
      <div id="Valid">
          Valid <a href="http://validator.w3.org/check/referer">HTML</a>
          and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
      </div>
  <div id="modified">
         Last modified ...
      </div>
</div>

如何让两个文本 block 显示在我想要的位置？

编辑:我正在设置一个 http://jsfiddle.net/示例(建议的 SSCCE 目前似乎已关闭)

这是例子 http://jsfiddle.net/vjmVc/我还尝试了两个嵌套的 div 元素但没有成功

Answer 1

如果你想防止右边的部分占用空间你可以将它定位到absolute。在这种情况下，您唯一需要记住的是将容器元素(页脚)的定位设置为 relative:http://jsfiddle.net/vjmVc/1/

另请记住，当人们使用小屏幕时，使用此解决方案，两个元素可能会在某些时候重叠。