Слева не работает правильно в тексте

Question

Слева не работает правильно в тексте

0

У меня есть PHP-код, который берет описание из базы данных и показывает его рядом с изображением.

Когда я помещаю margin-left: 5px; к описанию он работает отлично, но только в первой строке, потому что, когда есть две строки, работает только маржа слева на первом.

Я могу интерпретировать его в html следующим образом:

<div class="gamedes">
<img  class="miniaturas" src="recursos/miniaturas/coster.png">
<div class"gameides>
<a class="gametitle" href="game.php?name='.$row['name'].'">'.$row['name'].'</a>'
<div class="description"><script></script></div><br><br><br><br>'
</div>
</div>

И в CSS

.miniaturas {
    display: inline;
    border-radius: 10px;
    float: left;
}

.description {
    font-size: 15px;
    display: inline;
    border-radius: 3px;
    margin-left: 5px;
    overflow: hidden;
}

.gametitle{
    font-size: 20px;
    font-weight: bold;
    display: table-cell;
    margin-left: 5px;
}

.gamedes {
    width: 50%;
    display: inline-block;
}

Итак, как я могу поместить маржу слева на вторую строку?

Вот демо: http://jsfiddle.net/Ninjacu/G6tqc/

Ninjacu 22 март 2014, в 22:37

Источник

0

Вот, пожалуйста : jsfiddle.net/hashem/G6tqc/2 Мой ответ был ошибочным, поэтому я удалил его.
Hashem Qolami 22 март 2014, в 21:21
0

Окей, я решил это с запасом справа в .miniaturas
Ninjacu 22 март 2014, в 21:28

Теги:

php

html

css

1 ответ

Ещё вопросы

Вот, пожалуйста : jsfiddle.net/hashem/G6tqc/2 Мой ответ был ошибочным, поэтому я удалил его.
Окей, я решил это с запасом справа в .miniaturas

SULTAN · Accepted Answer · 2014-03-22T18-16-00.000Z

ОБНОВЛЕНИЕ, основанный на комментарии ниже:

скрипка: http://jsfiddle.net/3qvGt/

CSS:

    .miniaturas {
        display: inline;
        border-radius: 10px;
        float: left;
    }
   .indent5px{
       margin-left: 5px;
   }
    .description {
        font-size: 15px;
        display: inline;
        border-radius: 3px;
        overflow: hidden;
    }

    .gametitle{
        font-size: 20px;
        font-weight: bold;
        display: table-cell;
        margin-left: 5px;
    }

    .gamedes {
        width: 50%;
        display: inline-block;
    }

HTML:

<div class="gamedes">
<img  class="miniaturas" src="recursos/miniaturas/coster.png">
<div class"gameides">
<a class="gametitle" href="google.es">Hola</a>
<div class="indent5px">
    <div class="description">sdsdsdsds sdsdssdsd</div><br><br><br><br>'
    </div>
</div>
</div>

Ой ну спасибо! Я не думал об этом! Действительно спасибо
@Ninjacu, в этом случае вы помещаете свое описание div в div обертки ... пожалуйста, посмотрите обновленный ответ ... Я опубликую его сейчас ..
Хорошо, но у меня есть этот код, и я не могу сделать это правильно, потому что у меня есть две строки описания, но вы решили это с первым кодом, так что спасибо!
@Ninjacu Хорошо, в этом случае я бы предложил 1) удалить div обертки. 2) удалить display: inline; из вашего .description class . и 3-е) УДАЛИТЬ display:inline; & ДОБАВИТЬ text-align:justify; margin-left: 5px; в ваш класс .description . Проверьте это и скажите нам, если это работает так, как вы хотите. скрипка >> jsfiddle.net/ERe47