我如何设计我的blockquotes看起来像这样？

Question

我无法找到一种方法在我的报价中添加黄色块引用，而不会缩进/添加不需要的行高。

这就是我想要实现的目标：

这是我尝试过的：

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
}

.quote {
  line-height: color: #003b49;
  font-size: 2.9em;
}

<h1 class="contentquote"><span class="quote">&ldquo;</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">&rdquo;</span></h1>

这是我一直得到的：

非常感谢任何帮助！

Answer 1

您的代码有三个问题。

首先，您不小心将line-height和color合并为line-height: color:。您没有在示例代码中指定line-height，因此我猜测line-height只是一个错字。如果您实际使用line-height，则需要使用分号将这些分开。

其次，除了将字体引用分配给.contentquote之外，您忘记了包含字体引用。 Roboto Slab字体可以在Google上找到，并与<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">链接。

第三，#003b49与黄橙色无关;它与蓝绿相关。您需要将其替换为适当的颜色。示例中使用的完全颜色为#fdb527。

对于引号的实际定位，您希望将position: absolute应用于.quote。在其上设置一个否定margin-top以将其关闭，与文本内联。然后使用伪选择器 :first-of-type 将引号移到文本的左侧，margin-left上的引号为.quote:first-of-type。最后，要抵消负边距，请在padding-left上设置.contentquote。

这是一个有效的例子：

＆＃13;

＆＃13;

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  padding-left: 22px;
}

.quote {
  color: #fdb527;
  font-size: 2.9em;
  position: absolute;
  margin-top: -16px;
}

.quote:first-of-type {
  margin-left: -22px;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<h1 class="contentquote"><span class="quote">&ldquo;</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">&rdquo;</span></h1>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）

Answer 2

解决您的实际问题...

  

我无法找到一种方法在我的报价中添加黄色块引用，而不会缩进/添加不需要的行高。

您可以在引号上使用position: absolute，以防止它们干扰段落的流程。我还缩进了段落，为起始引号创建了一个装订线。

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  padding: 0 0 0 20px;
}

.quote {
  color: #fdb527;
  font-size: 2.9em;
  position: absolute;
  margin-top: -16px;
}

.quote:first-child {
  left: 0;
}

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<h1 class="contentquote"><span class="quote quote--start">&ldquo;</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">&rdquo;</span></h1>

Answer 3

Try the code below. :) 

就我而言，我在引号中使用了CSS伪元素:before和:after。

＆＃13;

＆＃13;

*{ box-sizing: border-box; -webkit-box-sizing: border-box; }

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  max-width: 350px;
  width: 100%;
  padding: 15px 25px 56px 40px;
  background: #e4e4e4; 
  color: #575757;
  position:relative;
}
.contentquote p{ position: relative; display: inline-block; margin: 0; }
.contentquote p:before, .contentquote p:after{ color: #fdb527; font-size: 2.9em; position: absolute; }
.contentquote p:before{ left: -28px; top: -13px; content: "“"; }
.contentquote p:after{ bottom: -35px; content: "”"; }

.contentquote h2{ position: absolute; font-size: .7em; right: 28px; bottom: 18px; font-weight: normal; }

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<div class="contentquote"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor do eiusmod tempor.</p><h2>Temporary Name</h2></div>

＆＃13;

＆＃13;

＆＃13;