1

我创建了这个简单的例子，它产生了这个 html ：

在此处输入图像描述

但是我在尝试将右对齐对齐"到文本末尾时遇到问题（在“发布”字之后）

警报（''）; 我怎样才能对齐它？（目前有float:left）

（请注意此问题未标记为 javascript。）

4

4 回答 4

1

看看： http: //jsbin.com/eheyok/20/edit

这是诀窍：

blockquote :last-child{
  display:inline;
}

blockquote:after {
  content: close-quote;
  font-family: 'Times New Roman';
  display: inline-block;
  top:20px;
  position: relative;
}
于 2013-07-23T16:13:43.810 回答
1

如果你想

在此处输入图像描述

那么以下

blockquote {
  line-height: 130%;
  margin-bottom: 10px;
  padding: 10px 10px 1px 10px;
  background-color: #eeeeee;
  quotes: '\201C' '\201D';
}
blockquote p{
  display:inline-block;
  padding: 0px 10px 14px 10px;
  margin:0;
}
blockquote p:before {
  content: open-quote;
}

blockquote p:after {
  content: close-quote;
  bottom:-0.25em;
}

blockquote p:before, blockquote p:after {
  font-family: 'Times New Roman';
  display: inline-block;
  font-weight: bold;
  color: #cccccc;
  font-size: 4em;
  vertical-align:text-top;
  position:relative;
}

就足够了..

演示在 http://jsbin.com/eheyok/29/edit

于 2013-07-23T16:20:28.610 回答
0

我编辑了 CSS 以使引号与文本对齐。我不建议这样做，除非你确定你的文本每次都是这个长度。

blockquote:after {
  margin-right: auto;
  margin-left: 170px;
content: close-quote;
font-family: 'Times New Roman';
  position: relative;
  top: -20px;
}

http://jsbin.com/eheyok/9/edit

但只是为了扩展我的答案：上面的 margin-right/margin-left 样式有助于设置两边的边距（也就是这个特定项目要开始/结束多远才能不再在该行上）。我添加了位置，以便引号会跳转到它上面的行。然后减去一些长度以使其恰到好处（“顶部”属性），因为引号的大小和文本的大小不同。

于 2013-07-23T16:05:58.180 回答
0

试试这个：

CSS

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,    pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;font-size: 14px;
 }


body 
{ 
background-color: White;
font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
font-size: 14px;
}
blockquote { quotes: '\201C' '\201D'; }


blockquote:before {
float:left;
font-family: 'Times New Roman';
content: open-quote;
}

blockquote:after {
content: close-quote;
font-family: 'Times New Roman';
float: right;
}
blockquote:before, blockquote:after {
font-weight: bold;
color: #cccccc;
font-size: 4em;
}


blockquote {line-height: 120%;
padding: 10px 0px 1px 10px;
background-color: #eeeeee;
}

来源：

http://jsbin.com/eheyok/19/edit

于 2013-07-23T16:12:37.560 回答