Question

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

我正在尝试执行此操作的页面here。

我尝试在页脚中创建一个内部<div>元素，并浮动第二个文本块并将float: right应用于它。此解决方案的问题是文本第一个（居中）文本元素现在在剩余空间的中心对齐，减去浮动<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>

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

编辑：我正在设置一个http://jsfiddle.net/示例（建议SSCCE目前看来很低）

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

Answer 1

显示：内联;漂浮：对; n div中的元素但这样你就不需要反转文本的顺序了。

Answer 2

如果你想阻止占据空间的正确部分，你可以定位它absolute。在这种情况下，您唯一需要记住的是将容器元素（页脚）的位置设置为relative：http://jsfiddle.net/vjmVc/1/

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

Answer 3

首先，添加适当的DOCTYPE。您的页面正在以怪癖模式加载。

<!DOCTYPE html>

或者

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

对于文本

#footer
{
text-align: right;
}

用于对齐

#all
{
margin: 0 auto;
}

修改

#footer
{
position: relative;
}

#modified
{
position: absolute;
top: 0;
right: 0;
}

如何在同一个包含元素中以不同方式对齐文本块？

3 个答案: