使用float时的blockquote问题
使用float时的blockquote问题
提问于 2017-10-16 19:41:08
在我的html页面中，我有一张图片漂浮在左边。所有文本都应该出现在图像的右侧和底部，这是预期的工作。
我唯一面临的问题就是区块引用。预期结果:在图片右侧->开始引号-引号-结束引号。实际结果:缺少开始引号。
请注意，如果我将包括块引用在内的所有文本放在div元素中并将其浮动，这个问题就会消失。但我不想让这个元素浮动。
如果有人能参考这段代码并提出任何解决方案，那将是非常有帮助的：Anshul's html
.contain img {
width: 100%;
height: 100%;
padding-right: 25px;*/
}
.main-div{
float:left;
width: 40%
}
.thin-black-border {
border-color: #686464;
border-width: 05px;
border-style: solid;
}
.header{
font: 200 80px'Oleo Script', Helvetica, sans-serif;
color: #F4E6E6;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}
/* =Structure
-------------------------------------------------------------- */
p {
margin-bottom: 30px;
}
p:last-child {
margin-bottom: 0;
}
/* =Blockquote
-------------------------------------------------------------- */
blockquote {
position: relative;
marign: 0px;
padding: 30px 30px;
text-align: center;
font-size: 30px;
/*display:inline-block;*/
}
blockquote:before, blockquote:after {
position: absolute;
width: 60px;
height: 60px;
font-size: 120px;
line-height: 1;
}
blockquote:before {
top: 0;
left: 0;
content: "\201C";
}
blockquote:after {
top: 0;
right: 0;
content: "\201D";
}<body>
<div style="width:100%; height: 100px;background-color:#3B3838" >
<h1 class="text-center header">Madhubala</h1>
</div>
<div class = "main-div contain"> <img src="https://nehamalude.files.wordpress.com/2011/02/madhubala.jpg"/> </div>
<!-- If I don't comment the code below, start quotation mark shows up -->
<!--<div style="float:left; width: 60%; "> -->
<p><blockquote><span title = "Theatre Arts - American magazine"> The Biggest Star in the World - and she's not in Beverly Hills!</span></blockquote></p>
<p>Text.....</p>
<!--</div> -->
</body>
回答 2
Stack Overflow用户
发布于 2017-10-16 19:50:36
使用浮点时块引用的问题
只需删除position: absolute；在blockquote:before，blockquote:after类
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.contain img {
width: 100%;
height: 100%;
padding-right: 25px;*/
}
.main-div{
float:left;
width: 40%
}
.thin-black-border {
border-color: #686464;
border-width: 05px;
border-style: solid;
}
.header{
font: 200 80px'Oleo Script', Helvetica, sans-serif;
color: #F4E6E6;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}
/* =Structure
-------------------------------------------------------------- */
p {
margin-bottom: 30px;
}
p:last-child {
margin-bottom: 0;
}
/* =Blockquote
-------------------------------------------------------------- */
blockquote {
position: relative;
marign: 0px;
padding: 30px 30px;
text-align: center;
font-size: 30px;
/*display:inline-block;*/
}
blockquote:before, blockquote:after {
width: 60px;
height: 60px;
font-size: 120px;
line-height: 1;
}
blockquote:before {
top: 0;
left: 0;
content: "\201C";
}
blockquote:after {
top: 0;
right: 0;
content: "\201D";
}
</style>
</head>
<body>
<div style="width:100%; height: 100px;background-color:#3B3838" >
<h1 class="text-center header">Madhubala</h1>
</div>
<div class = "main-div contain">
<img src="https://nehamalude.files.wordpress.com/2011/02/madhubala.jpg"/>
</div>
<!-- If I don't comment the code below, start quotation mark shows up -->
<!--<div style="float:left; width: 60%; "> -->
<p>
<blockquote><span title = "Theatre Arts - American magazine"> The Biggest Star in the World - and she's not in Beverly Hills!</span></blockquote>
</p>
<p> Text.....</p>
</body>
</html>Stack Overflow用户
发布于 2017-10-16 19:51:44
没有显示引号的原因是因为你的块引号占用了100%的容器宽度。这意味着它从浮点图像的下方开始。文本本身会进行调整以适应浮动图像，但引号设置为绝对位置：
position: absolute;
left: 0;因此从容器的最左边开始，在图像下方。如果删除绝对位置，则问号将出现在文本的开头。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46769485
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号