将结束引号与左对齐？

Question

我创建了这个simple example，产生了这个html：

但我在尝试将正确的结束"与文本的结尾（在“已发布的”字之后）对齐时遇到问题

警报（ ''）; 我该如何对齐？ （目前有float:left）

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

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

Answer 2

如果你想要

然后是以下

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

Answer 3

我编辑了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样式有助于设置任何一侧的边距（也就是说这个特定项目在它不能再在该行之前将开始/结束多远）。 我添加了位置，以便引号会跳到它上面的行。 然后减去一些长度以使其恰到好处（“顶部”属性），因为引用的大小和文本的大小不同。

Answer 4

试试这个：

<强> 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