Question

我有一个名为“box”的父div，里面有一个子div，“innerbox”。 innerboox在左上角保存文本和引号标记图标。但是，在内盒div的顶部有一个额外的行/间距，我不知道如何摆脱它。我尝试过边框折叠，垂直对齐底部和行高0但仍无济于事。有什么想法吗？

风格

<style>
.quote {display:block; width: 16px; height: 11px; background: url(img/quote-mark-sm.png) no-repeat 0 0; position: relative; top: 13px; left: -20px;}
.box {width: 350px; height: 350px; padding-left: 55px; float: left; padding-top: 140px; display: block; float:left; background: #CCC;}
.innerbox {width: 248px; height: 72px; display: table-cell; border: 1px solid #000;  font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000; text-align: left; vertical-align: middle; }
</style>

和HTML

<div class="box"><div class="innerbox"><div class="quote"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus sapien, consectetur nec malesuada a, vulputate vitae leo. Donec at urna sed odio volutpat gravida a sed felis.</div></div>

此处提供的图片文件：http://gabrieltomescu.com/quote-mark-sm.png

谢谢！

Answer 1

当用标签关闭时，它正在开始一个新行。

不确定quote-mark-sm.png是什么样的，但我猜测还有其他方法可以将它放在你的盒子里。您是否考虑过将其作为“盒子”的背景图像而不是在单独的div中使用它？（并适当地定位）

Answer 2

将你的跨度改为div并添加float：left对我有效。

<style type="text/css">
    .quote {display:block; width: 16px; height: 11px; background: url(img/quote-mark-sm.png) no-repeat 0 0; float: left;}
    .box {width: 350px; height: 350px; padding-left: 55px; padding-top: 140px; display: block; float:left; background: #CCC;}
    .innerbox {width: 248px; height: 72px; display: table-cell; border: 1px solid #000;  font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000; text-align: left; vertical-align: middle; }
</style>

HTML：

<div class="box">
     <div class="innerbox">
          <div class="quote"></div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus sapien, consectetur nec malesuada a, vulputate vitae leo. Donec at urna sed odio volutpat gravida a sed felis.
     </div>
</div>

div中的表格单元具有额外的顶部填充

2 个答案: