Изображение и текст на одной строке с текстом (но текст немного сдвинулся вверх)

0

Я должен реализовать следующее.

Изображение 174551

Изображение и текст должны быть прикреплены вниз. Также они должны быть в одной строке, но текст должен быть на 10 пикселей выше изображения. Все в порядке (потому что img имеет display: inline свойство), но я не могу справиться с этим текстовым материалом.

Если я поместил текст в div с position: absolute; bottom: 0 position: absolute; bottom: 0, он будет перекрывать изображение. Если я сделаю это position: relative; float: left; position: relative; float: left; , он не будет прикреплен к нижней части блока. Также я не могу сделать это position: absolute если свойство left задано шириной изображения, потому что оно может меняться.

Я даже не могу сделать правильный запрос на поиск, чтобы найти то, что мне нужно. Что можно сделать там?

Теги:
css-position

3 ответа

2
Лучший ответ

есть несколько способов сделать это. если это действительно текст, попробуйте применить css:

.text{line-height:200px}
/*you can adjust the line-hight to best suit your needs (100px or whatever)*/

вы также можете применить к тексту стиль style = "display: inline-block", который позволит вам использовать поля и paddings (например, margin-bottom: 10px\padding-bottom: 10px и т.д.), пожалуйста, обратите внимание, что для cross браузер (включая старые IE): inline-block вы должны написать что-то вроде этого:

.text{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding-bottom:10px;
}

* первая строка для старой мозиллы, предмет вкуса, ее можно омрачить. zoom: 1 и * display: inline для старых IE (например, 7 или 8)... это не совсем допустимая разметка, но работает отлично, поэтому не стоит беспокоиться

  • 0
    Ваш код и код @ user2320601 оба сработали (за исключением того, что никто из вас не сказал, что [я думаю, that в этом предложении должно быть больше that у тега img должен быть float: left чтобы предотвратить наложение текста), но пометьте идет к вам из-за объяснения.
  • 0
    Благодарю. я ценю
1
    body, p, div{
    margin:0px;
    padding:0px;
    }
    div{
        position:relative;
        background:blue;
    }
    img{
        background:red;
        display:inline;
        width:200px;
        height:200px;
        margin-right:20px;

    }
    p{
        display:inline;
        position:absolute;
        bottom:10px;
    } 



    <body>
      <div id='x'>
        <img src='image'/>
        <p> Text </p>
      </div>
    </body>
0

Не используйте абсолютное позиционирование и попробуйте добавить ниже css в текст.

vertical-align: top;

Найдите разницу между JSFiddle и JSFiddle2

  • 0
    Как это поможет мне переместить текст на 10 пикселей вверх, сохранив положение изображения?
  • 0
    @efpies не смог тебя достать, можешь добавить скрипку, как у меня? или вы хотите, чтобы текст посередине?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню