造型引號

我遇到併發布樣式引號時。所以我想要做的就是將引號稍微拉下來，以使它排列得很好。我玩弄了相對和絕對的定位，但無法弄清楚。這個程序將成爲一個隨機引用生成器，並且結束引用的位置必須是這樣的，以便它與文本以相同的方式排列，如果引用包含多行。造型引號

body { 
 
    background-color: rgb(44, 62, 80); 
 
} 
 
.quoteMachine { 
 
    margin: 100px auto 0 auto; 
 
    padding: 40px 60px; 
 
    max-width: 600px; 
 
    min-height: 225px; 
 
    border-radius: 5px; 
 
    background-color: white; 
 
} 
 
.theQuote { 
 
    text-align: center; 
 
    font-size: 30px; 
 
    color: rgb(44, 62, 80); 
 
} 
 
.quotetationMarks { 
 
    font-size: 60px; 
 
    font-weight: 600; 
 
} 
 
.quoteAuthor { 
 
    text-align: right; 
 
    font-size: 20px; 
 
    color: rgb(44, 62, 80); 
 
} 
 
.twitterButton {}

<div class="quoteMachine"> 
 
    <div class="theQuote"> 
 
    <blockquote><span class="quotetationMarks">&ldquo;</span > They call me Mister Tiibs <span class="quotetationMarks">&rdquo;<span></blockquote> 
 
     </div> 
 
     <div class="quoteAuthor"> 
 
     - hello 
 
     </div> 
 
     <button class="twitterButton"></button> 
 
     <button class="newQuoteButton"></button> 
 
     
 
     
 
    </div>

來源

2016-10-04 manuel

旁註：拼寫：'quotetationMarks' – Utkanos

您只需要'.quotetationMarks'的CSS選擇器（您的示例中的引號） - 然後您可以設置它的'position：relative'並將其上/下移動頂部或底部位置值。另請參閱@Utkanos關於拼寫的建議 –

太棒了！這是有效的，唯一的是我不完全明白爲什麼。引號是如何相對於引號而不是div的頂部？ – manuel

由於span s爲內聯元素，你可以添加到vertical-align: middle;和.quotetationMarks將它們向下移動向字符串的其餘部分的中間。

或者，如果您需要更精確的控制，則可以添加position: relative; top: 10px;。

來源

2016-10-04 13:00:33 CodingWithSpike

很棒的建議！ :) –

這正是我所做:)工程很好。我不明白的唯一原因是引號是相對於引用而言的，而不是相對設置位置時的div。 – manuel

也許將vertical-align: sub;添加到.quotetationMarks是你在找什麼？

你也可以使用fontawesome，這總是一個不錯的選擇。 - >http://fontawesome.io/icon/quote-right/

來源

2016-10-04 13:04:32 Carlos27

編輯：雖然vertical-align: middle;是一個非常有效和簡潔的方法，有時你得記住了引號一個非常具體的位置。如果您需要將模型與像素完美匹配，這種方法可爲您提供靈活性。

你可能會得到一些里程出使用僞元素渲染引號的，和相對/絕對定位，讓他們「只是如此」。

這對幫助定位跨線換位特別重要。（我已經編輯我的例子來強制換行，爲了說明這種方法的穩健性。）

從MDN：

就像僞類，僞元素被添加到選擇但不是描述特定的狀態，而是允許您設置文檔的某些部分。例如，:: first-line僞元素只定位選擇器指定的元素的第一行。

專門爲::before pseudo element：

::之前創建一個僞元素是匹配元素的第一個孩子。它通常用於通過使用content屬性將化妝品內容添加到元素。該元素默認爲內聯。

這些引用是你的風格，所以我認爲這對::before僞元素是一個很好的用例。

我叉你這裏codepen：http://codepen.io/cam5/pen/kkxpbX，但這裏有相關部分

<!-- quote HTML --> 
<blockquote> 
    <span class="quotationMark quotationMark--left"></span > 
     They call me&hellip;<br /> Mister Tiibs 
    <span class="quotationMark quotationMark--right"></span > 
</blockquote>

和CSS：

/* quote css */ 
.quotationMark { 
    position: relative; 
} 

.quotationMark--left::before, 
.quotationMark--right::before { 
    font-size: 60px; 
    font-weight: 600; 
    position: absolute; 
    top: -15px; 
} 

.quotationMark--left::before { 
    content:"\201C"; 
    left: -45px; 

} 
.quotationMark--right::before { 
    content:"\201D"; 
    right: -45px; 
}

這個CSS技巧的資源是偉大的，當你試圖找到用於將某個字形放入CSS的ISO content規則：https://css-tricks.com/snippets/html/glyphs/

設置父元素.quotationMark到display: relative;將意味着將top,right,left值傳遞給它們的具有position: absolute;屬性的子元素（僞元素），它們被計算爲相對於其父母的。

來源

2016-10-04 13:06:57

回答

相關問題