如何将居中和右对齐的<div>放在彼此旁边</div>

Question

我需要在现有的居中标题的右侧添加一些新文本。它应该都出现在标题（CSS）下划线之上。如果标题包装到第二行，则可以，但它应该保留在页面的中心。在此JSFiddle example中，您会看到主标题向左移位。更糟糕的是，如果您选择短标题和4行边文本，则存在重叠问题。

如何将所有内容放在正确的位置，如此篡改图像？

在添加新内容之前，这是我的div。

<div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h4>@Model.Heading</h4>
        </div>
    </div>
</div>

Answer 1

如果你正在使用bootstrap和列布局网格，我能想到的最好的方法是正确对齐你的文字我做了一个快速的jsfiddle

http://jsfiddle.net/j0whk4zh/1/

<div class="container">
    <div class="col-xs-8 red">
        <h4 class="page-heading"> Variable Length Text which could take up the whole page!
        </h4>
    </div>
    <div class="col-xs-4 blue">
        <div class="stuff">
            <p>add new stuff here</p>
            <p> and a bit more here</p>
            <p>add new stuff here</p>
        </div>
    </div>

Answer 2

使用空的<div>左侧浮动，镜像右侧的那个。使用JavaScript设置其大小，如this JSFiddle。