文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在同一包含元素中以不同的内联方式对齐到文本块？

问如何在同一包含元素中以不同的内联方式对齐到文本块？
EN

Stack Overflow用户

提问于 2012-10-21 23:15:10

回答 3查看 225关注 0票数 1

我有一个包含两个文本块的<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，但没有成功

css

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-10-21 23:58:38

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

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

票数 1

Stack Overflow用户

发布于 2012-10-21 23:21:38

display: inline；float: right；n div中的元素，但是这样你就需要颠倒文本的顺序。

票数 1

Stack Overflow用户

发布于 2012-10-21 23:22:46

首先，添加一个合适的DOCTYPE。您的页面正在以quirks模式加载。

<!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;
}

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12999101

复制

相似问题

问如何在同一包含元素中以不同的内联方式对齐到文本块？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在同一包含元素中以不同的内联方式对齐到文本块？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在同一包含元素中以不同的内联方式对齐到文本块？
EN