Пустое пространство вокруг изображения - PullRequest
5 голосов
/ 14 апреля 2009

У меня есть текст вокруг изображения, которое было перемещено влево. Но текст идет прямо к границе изображения. Как сделать вокруг него пустое пространство?

На данный момент я попал в CSS:

.image {
  float:left
}

и вид:

<% if article.newspic.exists? %> 
        <div class ="image">
        <%= newspic_thumbnail_tag(article) %>
        </div>
    <% end %>

  <%= simple_format(article.body) %><br>

Если я добавлю margin-right к изображению, текст просто начнется из-под изображения.

Ответы [ 6 ]

5 голосов
/ 14 апреля 2009

Добавление маржи-права должно работать в этом случае, но у меня были проблемы с наценками и плавающими ранее, особенно когда речь шла о отрицательных наценках, но у вас также есть проблемы с наценкой на полях. Это может или не может быть поведение, которое вы хотите. Часто я заканчивал тем, что защищенно помещал плавающий контент в div и использовал вместо него отступы, поскольку результаты, как правило, были более интуитивными.

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

3 голосов
/ 22 апреля 2009
.image {
  padding-right: 10px
}
1 голос
/ 14 апреля 2009

Если при добавлении поля margin-right к изображению текст просто отображается снизу, вам необходимо увеличить размер родительского контейнера.

Если общая ширина двух компонентов больше, чем размер родительского контейнера, один из них переходит на следующую строку.

Примеры кода на

<div class="parentDiv">
    <div class="image">
        **image here (assume it's 100px wide)**
    </div>
    <div class="otherText">
       **text here**
    </div>
</div>

Это не сработает, потому что размер изображения + поле изображения + ширина другого текста> ширина родительского раздела. Это приведет к тому, что текст перейдет на следующую строку:

.parentDiv
{
    width: 500px;
}

.image
{
    float: left;
    margin-right: 3px;
}

.otherText
{
    float: left;
    width: 400px;
}

Это будет работать:

.parentDiv
{
    width: 510px;
}

.image
{
    float: left;
    margin-right: 3px;
}

.otherText
{
    float: left;
    width: 400px;
}
0 голосов
/ 14 апреля 2009

Просто наткнулся на это вчера. Если вы планируете использовать рамку вокруг изображения, обязательно используйте свойства полей вместо отступов, иначе вы получите пробел между границей изображения и самим изображением.

0 голосов
/ 14 апреля 2009

Добавить либо:

  • margin-left или padding-left к тексту или
  • поле справа или справа от изображения

Трудно сказать, что было бы лучше, не видя ваш CSS / XHTML.

0 голосов
/ 14 апреля 2009

Добавьте поле справа к изображению.

.imageclass
{
  margin-right: 3px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...