Question

我试图在段落之前和之前定位引号。我正在使用绝对值。用不同的智能手机打开我的页面 - 例如浏览器iPhone 5 / iPhone 6会产生不同的效果。有任何想法吗！这是我的代码

HTML： -

<div class="quoteBlock">
  <div class="blockWrap">
    <span class="headline">italian<br/>classic</span>
    <p class="quoteText">
      <span class="quoteBegin">“</span>Lorem ipsum dolor sit Amet, consectetuer adipiscing.<br/>Aenean commodo ligula eget dolor.<br/>Donec pede justo, fringilla vel, alique, vulputate eget, arcu.<span class="quoteEnd">„</span>
    </p>
    <a class="ctaBlock">scorpi più prodotti</a>
  </div>
</div>

CSS： -

#content .quoteBlock {
  position: relative;
  background-color: #D4AF95;
}

#content .blockWrap {
  text-align: center;
  padding-top: 10%;
  padding-bottom: 10%;
}
#content .quoteBlock .headline {
  color: #333;
  font-family: arial, helvetica;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 20px;
  font-weight: 700;
  line-height: 23px;
}
#content .quoteText {
  font-style: italic;
  padding: 15%;
  line-height: 21px;
  position: relative;
}
#content .quoteBegin { 
  color: #333; 
  font-family: Georgia, serif;
  font-size: 37px;
  font-weight: 700; 
  position: absolute;
  left: 50px;
  top: 58px;
}
#content .quoteEnd { 
  color: #333; 
  font-family: Georgia, serif;
  font-size: 37px;
  font-weight: 700; 
  position: absolute;
  right: 70px;
  top: 121px;
}

Answer 1

我认为这就是你正在寻找的东西

＆＃13;

experiment_num    timepoint     type    value
50                    0         7a,b4     85
50                    10        7a,b4     90
50                    20        7a,b4     89
50                    0         10a,b4    85
50                    20        10a,b4    89
50                    0         7a,b6     90
50                    10        7a,b6     85
50                    20        7a,b6     87
50                    0         10a,b6    90
50                    20        10a,b6    88

＆＃13;

#content .quoteBlock {
  position: relative;
  background-color: #D4AF95;
}
#content .blockWrap {
  text-align: center;
  padding-top: 10%;
  padding-bottom: 10%;
}
#content .quoteBlock .headline {
  color: #333;
  font-family: arial, helvetica;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 20px;
  font-weight: 700;
  line-height: 23px;
}
#content .quoteText {
  font-style: italic;
  padding: 15%;
  line-height: 21px;
  position: relative;
}
#content .quoteBegin {
  color: #333;
  font-family: Georgia, serif;
  font-size: 37px;
  font-weight: 700;
  position: absolute;
  left: 50px;
  top: 58px;
}
#content .quoteEnd {
  color: #333;
  font-family: Georgia, serif;
  font-size: 37px;
  font-weight: 700;
  position: absolute;
  right: 70px;
  top: 121px;
}
blockquote {
  font-family: "Helvetica", sans-serif;
  font-size: 1.1em;
  font-style: italic;
  color: #999999;
  font-weight: 600;
  width: 90%;
  margin: 1.2% 0;
  padding: 1% 6.3%;
  line-height: 1.45;
  position: relative;
}
blockquote p {
  font-family: "Helvetica", sans-serif;
  font-size: 1em;
  font-style: normal;
  color: #000;
  font-weight: 400;
  width: 80%;
  padding: 1% 4.3%;
  line-height: 1.45;
  position: relative;
}
blockquote:before {
  display: block;
  content: "\201C";
  font-size: 55px;
  position: absolute;
  left: 1%;
  top: -5px;
  color: #8A8A8A;
}
blockquote:after {
  display: block;
  content: "\201D";
  font-size: 55px;
  position: absolute;
  right: 3.5%;
  top: -5px;
  color: #8A8A8A;
}
blockquote cite {
  color: #999999;
  font-size: .95em;
  display: block;
  float: right;
  margin-top: 5px;
  margin-bottom: 5px;
}
blockquote cite:before {
  content: "\2014 \2009";
}

＆＃13;

在引用文本之前和之后定位引号

1 个答案: