Блог

Главная - Вопросы по программированию - Как выровнять изображение слева и текст справа с помощью html-кода, включенного в фон?

Как выровнять изображение слева и текст справа с помощью html-кода, включенного в фон?

#php #html #css #styles

Вопрос:

Я пытаюсь выровнять изображение слева и поместить текст справа, я пробовал с

 float:left

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

Также в разделе «Изображение и текст» я добавил фон для изображения и текста, но он соответствует только длине текста.

Как выровнять изображение слева и текст справа с помощью html-кода, включенного в фон?

Кто — нибудь мог бы мне в этом помочь.

 <html>
 <head>
   <style>

.item-image {
  background-image: url("bkgd.jpg");
  background-color: #cccccc;
  float:left;
}

body {background-color: powderblue;}
h1   {color: blue;}
b    {color: red;}
</style> 
 </head>
 <body>

    <div class="item item-image">
<img src="<?= $_POST['imghide']; ?>" />Texto a la derecha alineado Texto a la derecha alineado Texto a la derecha alineado Texto a la derecha alineado Texto a la derecha alineado 
     </div>
<br clear="all">
</body>
</html>

Imagen Изображение результата

Ответ №1:

Вместо использования float: left на .item-image , вы должны использовать его на самом изображении. Поля будут работать на изображении,

 img{
  width: 50%;
  float: left;
  margin: 20px;
}

Кроме того, чтобы увеличить размер фона, добавьте отступы к фону, например:

 .item-image{
  padding: 10px;
}

Это добавит пространство вокруг дочерних элементов .item-image без увеличения их размера.

Метки: ,