0

html {
  width: 100%;
  background: url(bg.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

* {
  margin: 0;
  padding: 0;
}

.topBar {
  position: fixed;
  min-width: 100%;
  position: fixed;
  max-height: 10%;
}

#imgBar {
  padding: 1%;
  height: 7%;
  width: 7%;
  border: 4px solid black;
  border-radius: 20px;
  background-color: white;
}

.post {
  /*max-height: 200%;*/
  margin-bottom: 20%;
  word-wrap: break-word;
  margin-right: 1%;
}

#postTxt {
  margin-left: 70%;
  text-align: center;
  /*background-color: white;*/
  width: 30%;
  font-size: 30px;
  border: 3px solid black;
  /*position: absolute;*/
  right: 0px;
  top: 40%;
  border-radius: 40px;
  font-family: "Segoe Script";
  background-color: white;
  -webkit-transition: all 0, 3 ease;
  -moz-transition: all 0.3s ease;
  ;
  -o-transition: all 0.3s ease;
  ;
  transition: all 0.3s ease;
}

#postTxt:hover {
  background-color: black;
  color: white;
  border: 3px solid white;
  cursor: default;
}

.post1 {
  background-color: black;
  width: 100%;
}

#gh_logo {
  height: 10%;
  width: 10%;
}

.post2 {
  background-color: white;
}

.post2_content {}
<div class="topBar">
  <a href="https://vk.com/share_love"><img src="logo.png" id="imgBar" /></a>
</div>
<div class="post">
  <p id="postTxt">Ты ищешь себя в глазах других людей. Ты боишься одиночества. Боишься, что перестанешь существовать как личность, если все тебя покинут.</p>
</div>
<div class="post1">
  <a href="https://github.com/Shar3L0ve"><img src="gh_logo.png" id="gh_logo" /></a>
</div>
<div class="post2">
  <div class="post2_content">
    <img src="32.jpg">
    <p>«Конец Евангелиона» (яп. 新世紀エヴァンゲリオン劇場版 Air/まごころを, англ. The End of Evangelion</p>
  </div>
</div>

введите сюда описание изображения

чтобы текст шёл с правой стороны от картинки

2
  • А как вы уже пробовали это сделать? (приложите ваши попытки решения) 14 дек 2018 в 19:47
  • @ВладимирКлыков спасибо, я дурачок ;3 14 дек 2018 в 20:09

2 ответа 2

1

Можно сделать так:

  <div class="
      <div class="post2_content">
          <img src="32.jpg" class="items">
          <p class="items">«Конец Евангелиона» (яп. 新世紀エヴァンゲリオン劇場版 Air/まごころを, англ. The End of Evangelion</p>
     </div>
</div>

<style type="text/css">
    .items {
        display: inline-block;
    }
</style>

Т.е вы добавляете к каждому элементу класс items, а потом добавляете стиль display: inline-block; к классу .items. Вот что получается : введите сюда описание изображения

2
  • это не работает, я добавил код, заранее спасибо :3 эх эти бессонные ночи, и все ради зачета -_- 14 дек 2018 в 20:03
  • Это где такие зачеты? Я в свое время не спал, потому что рекурсивно должен был вызывать функции в C/C++ а не css/html писать... 15 дек 2018 в 14:18
1

Есть еще вариант как выставить элементы в строчку, создаем 3 элемента любых, помещаем их в другой(в моем случае они в <body></body>)

<div id="main1"></div>
<div id="main2"></div>
<div id="main3"></div>

Затем задаем им style:

body{
height: 100%;
width: 100%;
background-color: rgb(230, 230, 230);
margin: 0;
padding: 0;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
display: flex;
}
#main1{
background-color: red;
width: 50px;
height: 50px;
}
#main2{
background-color: blue;
width: 50px;
height: 50px;
}
#main3{
background-color: green;
width: 50px;
height: 50px;
}

В итоге получается это: введите сюда описание изображения

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.