как поместить текст рядом с изображением? - PullRequest
Новая
       0

как поместить текст рядом с изображением?

0 голосов
/ 10 марта 2020 

.text{
width: 50px;
font-size: 27px;
float: left;
font-weight: bold;
}
.image{
width: 30%;
height: 100%;
clear: left;
float: right;

}
.parent{
background-color: pink;
height: 350px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link href="schrott.css" rel="stylesheet" type="text/css">
  <title></title>
</head>

<body>
  <div class="parent">
<p class="text">ihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnii</p>
<img src="Pictures\—Pngtree—triangle neon color glowing border_4072770.png" class="image">
  </div>
</body>

</html>

Мой wi sh будет перемещать текст рядом с изображением. Я поместил эти два в div и разместил изображение правильно, но теперь я не могу переместить текст вниз с помощью margin-op? Почему и что я могу улучшить?

Ответы [ 3 ]

0 голосов
/ 10 марта 2020

Как насчет использования flexbox (display: flex): 

.text{
  width: 49%;
  word-wrap: break-word;
  margin: 0;
  align-self: center; /*Vertically align text*/
}
.image{
  width: 49%;
  height: 100%;
  background-color: red; /*for illustration*/

}
.parent{
  background-color: pink;
  height: 350px;
  display: flex;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link href="schrott.css" rel="stylesheet" type="text/css">
  <title></title>
</head>

<body>
  <div class="parent">
<p class="text">ihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnii</p>
<img src="Pictures\—Pngtree—triangle neon color glowing border_4072770.png" class="image">
  </div>
</body>

</html>
0 голосов
/ 10 марта 2020

Это CSS, уровень 1 человек: просто используйте float. Значение float равно left, right или none ( float в Mozilla Developer Network ). Порядок элементов также должен влиять. 

<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: left;" />

<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: right;" />

<img alt="Placeholder" src="4072770.png" style="float: left;" />
<p>Placeholder...</p>

<img alt="Placeholder" src="4072770.png" style="float: right;" />
<p>Placeholder...</p>

Также не ставьте пробелы или заглавные буквы в URL-адресах, пока вы не станете более продвинутыми или не создадите больше головной боли, чем стоит.

0 голосов
/ 10 марта 2020

Вот пример, указывающий вас в правильном направлении: https://jsfiddle.net/h5o607e1/1/

Самая важная вещь, на которую вам следует обратить внимание, это положение и настройки отображения текста и текста. изображение: position: relative; и display: inline-block;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...