3

我有一个名为“box”的父 div，里面有一个子 div，“innerbox”。innerboox 在左上角保存文本和引号图标。但是，innerbox 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

谢谢！

4

2 回答 2

0

当它被标签关闭时，它开始一个新行。

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

于 2011-01-13T07:21:59.203 回答
0

将跨度更改为 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>
于 2011-01-13T07:36:00.217 回答