0

ページの中央に顧客の声の引用を配置したいと思います。引用符は任意の長さである可能性がありますが、2行にまたがっていません。次に、新しい行が必要です。次に、紹介文のすぐ下にあるが、正当な理由で、紹介文を提供した人の名前が必要です。

<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;}

任意の長さの引用符で機能するようにソースを調整するにはどうすればよいですか？

4

3 に答える 3

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;
}
于 2013-01-09T19:54:41.867 に答える
1

マークアップを少し変更し、ソースを見積もりにネストします。

<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;
}

これがそのフィドルです。

于 2013-01-09T20:03:21.507 に答える
0

基本的に：マークアップを醜くハックすることなくしてはいけません。（そのような解決策については、THiCEの回答を参照してください）。

これはお勧めしませんが、JavaScriptを使用しても問題がない場合、これはかなり簡単です:(以下ではjQueryを使用していますが、JavaScriptを使用しなくても実現できます）

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

JavaScriptを使用したくない場合や、ハックしたくない場合は、レイアウトを少し考え直すことをお勧めします。

于 2013-01-09T19:58:22.150 に答える