Как posicionar текст справа от изображения?

Я хочу поместить текст в правую сторону в верхнюю часть изображения, но всегда он размещает себе меня в правую сторону из-за ПОД изображением, я оставляю им код в html и: я хотел бы знать, возможно делать ли в html или в css ? потому что также я ничего не могу добиваться в css.

<div>
  <img src="http://lorempixel.com/300/200/"> (imagen en cuestion)
  <p>Lista de Lubricantes</p> <!-- esto es lo que quiero que vaya a la derecha -->
</div>
6
задан 26.11.2016, 03:36
4 ответа

Я вижу, что почти все комментируют тебе факт использования float: left и, однако, никто не объясняет тебе, что причина производит себе этот эффект.

Действительно это случается благодаря тому, что этикетки p tags у них есть по умолчанию свойство display: block и это способствует тому, чтобы они действовали как блоки, и тому, чтобы текст спустился точно под изображением.

Однако, ты можешь способствовать тому, чтобы элементы действовали как элементы inline (что поместились в той же линии), но имея свойства блоков (у них может быть высота, ширина...). Это получают посредством свойства display: inline-block. Таким образом, текст поместится справа от изображения, так как posicionará в той же линии, которая.

В конце концов, чтобы помещать текст в верхнюю часть, ты мог бы использовать свойство vertical-align, свойство, которое только действует на элементах inline но поскольку мы показали, что наш текст привел в действие как inline-block тогда он будет нам позволять использовать ее. Посредством этого свойства мы можем определять, где будет выровнен элемент inline внутри линии, в которой он находится. В этом случае, поскольку мы хотим, чтобы он поместился в верхней части, мы будем должны использовать признак top.

#texto{
  display: inline-block;
  vertical-align: top;
}
<div>
  <img src="http://lorempixel.com/300/200/">
  <p id="texto">Lista de Lubricantes</p>
</div>
7
ответ дан 24.11.2019, 14:36

Если то, что ты хочешь, состоит в том, чтобы текст появился справа от изображения, что ты должен делать, состоит в том, чтобы плавать изображение в левую сторону (с float:left):

img { float:left; }
<div>
  <img src="http://lorempixel.com/300/200/"> (imagen en cuestion)
  <p>Lista de Lubricantes</p> <!-- esto es lo que quiero que vaya a la derecha -->
</div>
3
ответ дан 24.11.2019, 14:36

Восток cГіdigo может подавать тебя. Ты помещаешь изображение и текст внутри контейнера в comГєn и потом играешь с нею posiciГіn текста внутри этого контейнера посредством абсолютных положений.

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 0px;
}
<div id="container">
  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Texto superior-derecha!
  </p>
</div>
2
ответ дан 24.11.2019, 14:36

Ты мог бы снимать <p> и кроме того определять style="float:left; в изображении.

<div>
  <img src="http://lorempixel.com/300/200/" style="float:left;"> 
  <div>Lista de Lubricantes</div> 
</div>
2
ответ дан 24.11.2019, 14:36
  • 1
    Это сделало справедливым то, в чем он нуждался, спасибо! – MarianoG 11.04.2016, 18:15
  • 2
    Заметь: признак align устаревший и был deprecado ( шрифт ). Конечно функционировать и # 225; но лучше не использовать это и в том, чтобы искать альтернативу – Alvaro Montoro♦ 11.04.2016, 18:24
  • 3
    Верно я не понял, что " align" он был устаревшим, но ты добиваешься того же эффекта используя style = и quot; float:left; " @AlvaroMontoro спасибо за помечание проблемы – Leandro Tuttini 11.04.2016, 18:36

Теги

Похожие вопросы