Работа с текстом.

DarkKnight · April 8, 2012

Здравсвуйте.

Подскажите пожалуйста, столкнулся со следующей проблемой.

Есть верстка:

<style type="text/css">
#main {
    border: 1px solid black;
    width: 300px;
}
</style>
<body>
<div id="main">
    <p id="text">
        You can improve your ability to gatherto gatherto gather        
        <img id="image" src="blankslot.png" width="98" height="23" />        
        information by grouping like items into basic categories.
    </p>
</div>

вот что мі видем на картинке

проблема в том, что мне нужно расположите текст так, чтоб отступы между строками в той строке, где находится картинка были такими же ,как и отступы между строками, где нет картинки. Как видите на рисунке ниже, в строке с картинкой отступ сверху больше(показываю его красным цветом)

при этом html-верстка не должна меняться, только можно менять css

Помогите пожалуйста, как я могу это сделать?

Switch74 · April 8, 2012

размер шрифта сделай побольше и все будет норм, а то у тебя видать картинка то по высоте больше текста, вот и появляется большой отступ

K313 · April 9, 2012

dostel1 · April 9, 2012

может тебе поможет

img{display:inline-block;

vertical-align:top|middle|bottom;}

Switch74 · April 9, 2012

<img style="margin-top:-10px;top:10px;" src="...">

без position, top не отработает отрицательный margin-top может помочь

может тебе поможет
img{display:inline-block;
vertical-align:top|middle|bottom;}

img и так inline-block и выравнивание скорее всего не поможет, т.к. высота img больше высты текста

dostel1 · April 9, 2012

ну я хотел сказать что можна поигратся с выравниванием

Switch74 · April 9, 2012

top с position:relative тоже не поможет, т.к. визуально объект будет смещаться, но занимать он будет продолжать то место которое сейчас занимает и отступ от этого никуда не денется

DarkKnight · April 9, 2012

размер шрифта сделай побольше и все будет норм, а то у тебя видать картинка то по высоте больше текста, вот и появляется большой отступ

Спасибо огромное! Помогло!

top с position:relative тоже не поможет, т.к. визуально объект будет смещаться, но занимать он будет продолжать то место которое сейчас занимает и отступ от этого никуда не денется

Подскажите пожалуйста, есть ли еще варианты решения этой проблемы, а то размер шрифта менять не очень хочется, так как текст выходит за нужные пределы по вертикали?

Switch74 · April 9, 2012

1. ну можно увеличить межстрочное расстояние, чтобы оно везде было побольше,

2. можно саму картинку уменьшить в размерах

3. можно вставлять картинку в обертке так, чтобы обертка была высотой с текст, а картинка внутри этой обертки была бы position:absolute; тогда размеры картинки не будут влиять на строчки

DarkKnight · April 9, 2012

1. ну можно увеличить межстрочное расстояние, чтобы оно везде было побольше,
2. можно саму картинку уменьшить в размерах
3. можно вставлять картинку в обертке так, чтобы обертка была высотой с текст, а картинка внутри этой обертки была бы position:absolute; тогда размеры картинки не будут влиять на строчки

3-й пункт , то что нужно! Спасибо огромное!

Sign In

Работа с текстом.

Question

DarkKnight

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

K313

Link to comment

Share on other sites

dostel1

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

dostel1

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

DarkKnight

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

DarkKnight

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information