Я должен реализовать следующее.
Изображение и текст должны быть прикреплены вниз. Также они должны быть в одной строке, но текст должен быть на 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:
.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)... это не совсем допустимая разметка, но работает отлично, поэтому не стоит беспокоиться
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>
Не используйте абсолютное позиционирование и попробуйте добавить ниже css в текст.
vertical-align: top;
that
в этом предложении должно быть большеthat
у тегаimg
должен бытьfloat: left
чтобы предотвратить наложение текста), но пометьте идет к вам из-за объяснения.