Ячейка внутри div имеет дополнительную верхнюю подкладку - PullRequest
Новая
       42

Ячейка внутри div имеет дополнительную верхнюю подкладку

3 голосов
/ 13 января 2011

У меня есть родительский div, называемый "box", а внутри него есть дочерний 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

Спасибо!

Ответы [ 2 ]

0 голосов
/ 13 января 2011

Изменение вашего диапазона на 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>
0 голосов
/ 13 января 2011

Когда новая строка закрывается тегом, начинается новая строка.

Не уверен, как выглядит quote-mark-sm.png, но я предполагаю, что есть и другие способы разместить ее внутрикоробка.Рассматривали ли вы просто сделать это фоновое изображение для «коробки» вместо того, чтобы использовать его в отдельном div?(и расположив его соответственно)

...