#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>
Ответ №1:
Вместо использования float: left
на .item-image
, вы должны использовать его на самом изображении. Поля будут работать на изображении,
img{
width: 50%;
float: left;
margin: 20px;
}
Кроме того, чтобы увеличить размер фона, добавьте отступы к фону, например:
.item-image{
padding: 10px;
}
Это добавит пространство вокруг дочерних элементов .item-image
без увеличения их размера.