当一切都有动态宽度时，如何将文本和右浮动文本放在同一行？

Question

我有一个可变大小的文本块，我想在div中居中。 div的宽度是其父元素的百分比，高度由填充定义，但中心文本高。这很容易通过以下方式实现：

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

工作正常。

但是当我尝试在右边添加部分时：

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

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

这是我正在努力实现的模型：

我认为这对于flexbox来说非常简单，但我想避免使用最近的东西，因为我需要支持旧的浏览器。

This question似乎相关，但（如果我错了，请纠正我）似乎需要已知的宽度。

我最好怎么做呢？

Answer 1

试试这个：

<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/

Answer 2

IE8 +老够了吗？

Building upon your fiddle，你可以在IE8 +中得到你想要的东西。请注意，包装器#b需要设置box-sizing属性才能将其设置为width: 50% ，包括 padding。然后对于你的浮动元素，只需添加：

margin: 0 -15px 0 -100%;

-15px右边距占据您的15px右侧边距，将项目完全拉到右侧，然后-100%左边距会使前面的文字完全居中。< / p>

还是需要IE7支持？

你提到需要支持“旧浏览器”，但是你没有提供任何关于如何保持的信息（IE8现在是“旧的”，但也许你指的是更老的）。如果您需要IE7（或更低？）支持，那么您需要有条件地定位IE7和use this instead：

margin: -1.2em -15px 0 0;

IE7无法识别float: right与以后的浏览器相同，并且会将其置于前面文本的“下方”，-100%左边距会将浮动元素拉回到左侧。这样就消失了，并且为了使文本与前面的文本一致，我们给它一个负的上边距，应该设置为等于所用字体的line-height（通常是{ {1}}或1.2;您可能希望在1.1容器上明确设置它。我没有测试过看看它是否适用于IE6。

Answer 3

这对你有好处吗？ http://jsfiddle.net/3Y7ty/

.container {
    width:100%;
    overflow:hidden;
    position:relative;
}
.center {
    width:50%;
    padding:15px;
    margin:0 auto;
    background:#ccc;
}

.right {
    display:inline-block;
    padding:15px;
    background:#999;
    position:absolute;
    right:0;
    top:0;
}


<div class="container">

 <div class="center">
     Lorem ipsum...
 </div>

 <div class="right">
     ASDF!
 </div>

</div>

Answer 4

我添加了这个小提琴。 http://jsfiddle.net/nQvEW/68/。检查一下。

我将主元素定位为绝对元素，而其中一个子元素相对于父元素而另一元素元素作为绝对元素。顶部和左侧属性可根据您的需要进行调整。但我已经为主要的div元素硬编码了以下内容。您可以将其添加为 CSS 。

position:absolute;
width:500px;
height:40px;
background-color:#F00;

Answer 5

你可以尝试：

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

我刚刚做了一个快速的模拟工作。

Answer 6

这实际上并不像看起来那么复杂。您只需要从正常流中移除右对齐的div，并在文本容器的右侧定位（对齐）它。 （演示中所有注释的CSS都是必要的;其余的用于演示目的。）

此解决方案的优点是容器和文本元素正常流动，并且它使用与您的示例相同的HTML结构。

<强>演示：

View Demo >> http://pasteboard.s3.amazonaws.com/images/1U5yFIwE.png

基本代码：

#text {
  margin: auto; /* aligns #text to the center of #container */
  text-align: center; /* self-explanatory; aligns text to the center */
  position: relative; /* needed so that the position of #right is relative to #text, not the body */
}

#right {
  display: inline-block; /* allows #right to display on the same line as the text in #text while still acting like a block element (block: p, div, etc.) */
  position: absolute; /* removes #right from the normal flow, and positions it in the top-left of #row */
  right: 0; /* aligns #right 0px away from the right side of #text */
}

图片：

Answer 7

我已经完成了一点点css工作。

HTML代码示例：

<div class="MainContainer"><p>Lorem ipsum...</p><div style="float: right;">ASDF!</div></div>

CSS代码示例：

.MainContainer{
    width : 50%;
    padding : 15px !important;   
    text-align : center !important;
    border : 15px solid #000;
    position : absolute;   
}

.MainContainer div { margin-top : -7%; text-align:center !important;}

在行动中看到它：

  

http://jsfiddle.net/john_rock/tZzwA/

我认为这可以帮助您解决问题。

Answer 8

正如其他人所说，你需要从流程中释放第二个div然后重新定位它。设置绝对顶部与填充相同，以恢复正确的垂直位置。试试这个（与Karacas不同），请参见第二个视图，以证明居中是正确的：

<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;position: relative;">
    Lorem ipsum...
    <div style="position: absolute;right: 0;top: 15px;">ASDF!</div>
</div>
<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

http://jsfiddle.net/huuanito/8N9BT/

Answer 9

您拥有的代码几乎可以用于一些小的更改。

1. 第二个div需要独立，而不是嵌套在第一个中。
2. 第一个`div'需要浮动到左，第二个需要向右。

几乎就是这样。

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

 <div style="float:right;">
     ASDF!
 </div>

Try It!