3

「box」という親 div があり、その中に子 div「innerbox」があります。innerboox は、左上隅にテキストと引用符アイコンを保持します。しかし、innerbox div の上部に余分な行/スペースがあり、それを取り除く方法がわかりません。Border-collapse、vertical-align bottom、line-height 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

スパンをdivに変更し、floatを追加します。

<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 に答える
0

タグで閉じると、新しい行が始まります。

quote-mark-sm.png がどのように見えるかはわかりませんが、ボックス内に配置する方法は他にもあると思います。別のdivで使用するのではなく、「ボックス」の背景画像にすることを検討しましたか? （そして適切に配置する）

于 2011-01-13T07:21:59.203 に答える