如何將某些文本右對齊到其他居中的文本

Question

我希望在頁面中間有一個客戶推薦報價。 引用可能是任意長度，但不跨越兩行。 然后我想要一個新的行，然后是提供證詞的人的名字，只是在證詞下但是正確的。

<div class="quote">
 "Wow!  Thanks, create customer service."
</div>
<div class="source">
  -- John S. - California
</div> 

樣式：

.quote {text-align:center}
.source {text-align:right; padding-right:300px;}

如何對齊源以便我可以使用任意長度的引號？

Answer 1

這可能會：

HTML：

<blockquote>
    <p>
        <span class="quote">
            "Wow!  Thanks, create customer service."
            <cite>
                 -- John S. - California
            </cite>
        </span> 
    </p>
</blockquote>

CSS：

blockquote {
    text-align: center;
}
.quote {
    position: relative;
}
cite {
     position: absolute;
     right: 0;
     bottom: -25px;
     text-align: right;
}

Answer 2

稍微更改標記並將源嵌套到引號中。

<div class="quote">
    "Wow!  Thanks, create customer service."
    <div class="source">
         -- John S. - California
    </div> 
</div>

它的CSS：

.quote { 
  display:table;
  text-align: center;
  margin:0 auto;
}

.quote .source {
  text-align:right;
}

這是它的小提琴 。

Answer 3

基本上：你不能不用你的標記太丑陋和黑客。 （參見THiCE對這種解決方案的回答）。

我不推薦這個，但如果你對使用JavaScript沒問題，那么這很簡單:(下面使用jQuery，但沒有它可以實現）

$(".quote").each(function() {
    var $this = $(this);
    $this.next().css({"padding-right": ($this.parent().width() - $this.width()) / 2});
});

如果您不想使用JavaScript並且不想破解，我建議您重新考慮一下您的布局。