当一切都具有动态宽度时，如何将文本和右浮文本放在同一行上？ [英] How does one have centered text and right-floating text on the same line, when everything has dynamic widths?

问题描述

我有一个可变大小的文本块，我想在一个div中心。 div的宽度是它的父元素的百分比，高度由padding定义，但是中心文本的高度。这很容易通过：

I have a variable size block of text, which I would like centered in a div. The width of the div is a % of its parent element, and the height is defined by padding however tall the center text is. This is easily achieved via:

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

这很好。

我尝试添加右侧的部分：

But when I try to add the part on the right:

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
    <div style="float: right;">ASDF!</div>
</div>

然后它计算文本的宽度，右边的文本的总宽度， ASDF！在右边，但把Lorem ipsum ...更多的左边比它应该是（好像lorem ...的总长度包括asdf！）。

then it counts the width of the text on the right towards the total width of the text, and puts the "ASDF!" on the right, but puts the "Lorem ipsum..." more to the left than it ought to be (as if the total length of lorem... included the asdf!).

这是我想要实现的模型：

Here's a mockup of what I'm trying to achieve:

我认为这将是很容易与flexbox，但我想避免使用任何东西最近因为我需要支持旧的浏览器。

I think this would be pretty easy with flexbox, but I want to avoid using anything recent because I need to support old browsers.

这个问题似乎相关，但（如果我错了，纠正我）似乎需要已知的宽度。

This question seems relevant, but (correct me if I'm wrong) it seems to require known widths.

我最好去

推荐答案

尝试：

<div class='content' style="width: 50%; padding: 15px; text-align: center; position: relative">
    <div class="noDown" style="position: absolute; right: 0;">ASDF!</div>
    Lorem ipsum...
</div>​

JsFiddle测试： http://jsfiddle.net/3Y7ty/2/

JsFiddle Test: http://jsfiddle.net/3Y7ty/2/

这篇关于当一切都具有动态宽度时，如何将文本和右浮文本放在同一行上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！