Jump to content
  • 0

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


DarkKnight
 Share

Question

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

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

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

<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>

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

problem_1333916421_ehinsuvx12.png

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

prob_1333916651_5a27twrko9.png

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

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

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

<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 больше высты текста

Link to comment
Share on other sites

  • 0

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy