Question

我无法在引号之间保持段落平方。在firefox中，引号之间的最后一行向左伸出太远。图像是我希望它看起来像。

enter image description here

http://jsbin.com/elohej＆lt; - 这显示了firefox中的问题。

<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
/* Block Quote*/
#bqstyle{
    width: 650px;
    margin:30px 0 0 230px;
    border: solid 1px #000;

}

#bqstyle blockquote{
    font-size:24px;
    height: 50px;
    padding: 0 25px 50px 0;

}

.bqstart {
     float: left;
     font-size: 700%;
     color: #605f5f;
     height:25px;
     margin-top: -40px;
     padding-right: 5px;
     padding-bottom: 100px;
 }



 .bqend {
     float: right;
     font-size: 700%;
     color: #605f5f;
     height: 35px;
     margin-top: -35px;
     margin-right:-40px;
 }

/* END Block Quote*/
</style>


</head>

<div id="bqstyle">
<blockquote><p><span class="bqstart">&#8220;</span>Frank is the best. I take my Z to Hill&#8217;s for all my maintenance and car needs, and I&#8217;ll never take it to the dealership again. Better service. Better prices. <span class="bqend">&#8221;</span></p></blockquote>
</div>
<p> Test Paragraph Test ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest Paragraph</p>
</html>

Answer 1

你可以通过绝对定位你的开场报价而不是浮动它，并在你的p标签上添加padding-left来实现这一点。

blockquote p {
     padding-left: 80px;
     position: relative;
}

.bqstart {
     font-size: 700%;
     color: #605f5f;
     height:25px;
     position: absolute;
     left: 0;
     top: 0;
 }

为什么这段不会在引号之间正确排列？

1 个答案: