html - 如何将居中和右对齐的 <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>