純CSS

我想要的風格塊引用看起來像這樣風格BLOCKQUOTE純CSS

with whitespaces （它應該是沒有空格在塊引號的開頭

我的HTML/CSS

<blockquote><p>Lore ipsum...</p></blockquote>

blockquote { 
margin: 1em 2em; 
border-left: 1px solid #999;  
padding-left: 1em; } 

blockquote:before { 
content: open-quote; 
font-size: 6em; 
line-height: 0px; 
margin: 0px 5px 0px -40px; 
vertical-align: bottom; 
position: relative; left: -15px; 
} 

blockquote p:first-letter { 
margin: .2em .3em .1em 0; 
font-size: 220%; 
} 
/* without unnecessary font type/color attributes*/

我正在尋找類似position: relative; left: -15px;，但它應該工作比更可靠與不同的窗口尺寸本（更可靠的手段......哦，它應該是純CSS ...; - ））

您知道一個解決方案問題，不會留下任何不必要的空間嗎？

來源

2011-11-21 Nyoman

你可以嘗試用填充左？ – Schoof

你能給我一個提示嗎？我怎樣才能使用填充左側在塊引號的開頭沒有空格？ – Nyoman

我不認爲我理解你的問題。如果你只是想把2個div放在eachother旁邊，你應該使用'float：left'。 – Schoof

我添加了一個左邊的浮動並更改了頂部/左邊的定位聲明。

blockquote:before{ 
content: open-quote; 
font-size: 6em; 
line-height: 0px; 
margin: 0px 5px 0px -40px; 
vertical-align: bottom; 
position: relative; 
float: left; 
top: .4em; 
left: -.15 em; 
}

這裏是輸出。我沒有試圖匹配你的字體和顏色。 sample output

來源

2011-11-21 22:34:53

謝謝修復！ - 但是現在（？）第二個（和第三個）時間使用了blockquote引號是錯誤的（單個而不是雙） - >請參閱：http：//i.imgur.com/muMr8.png您是否知道爲什麼？ – Nyoman

**對不起**，通過使用曲線引號而不是「打開引號」來修復此行爲... – Nyoman

隨着position: relative在可以僞元素與position: absolute容易定位。看到這個jsfiddle演示http://jsfiddle.net/VZxhH/1/

blockquote { 
    border-left: 1px solid #999; 
    position: relative; 
    padding-left: 1em; 
    margin: 1em 2em; 
} 

blockquote:before { 
    content: open-quote; 
    position: absolute; 
    font-size: 6em; 
    left: -38px; 
    top: -23px; 
}

來源

2011-11-21 22:39:59 Jona

要保持與問題頂部和左側保持一致，請使用em而不是像素。 –

回答

相關問題