Как прижать img и текст к контейнеру?

Question

swerzy @swerzy

HTML
CSS

Как прижать img и текст к контейнеру?

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

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	 <title>Домашка</title>
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id="header" class="header">
  <div class="container">
    <div class="img-box">
      <img src="111/logo.png" alt="WAYUP"> </div>


    <div class="offer">
      <h1 class="title">
        С помощью верстки
        я создам ту жизнь, о которой
        мечтаю!
      </h1>
      <p class="intro">
        Мои стремления + настойчивость позволят мне достичь чего угодно. Я не верю в это. Я знаю это на 100%. Меня не остановить!
      </p>
      <a href="#" class="btn">Двигаться к мечте!</a>
    </div>
    <div class="img-box">
      <img src="111/111.png" alt="desktop" class="desktop">
    </div>

  </div>

</header>

<section id="learn" class="learn">
  <div class="container">

  </div>
</section>
<section id="mail" class="mail">
  <div class="container">

  </div>
</section>
<footer id="footer" class="footer">

  <div class="container">
  </div>
</footer>

 </body>
 </html>

body {
	padding: 0;
	margin: 0;
}


.container {
	width:1170px;
	margin: auto;
	display: flex;
	justify-content: space-between;

}

.header {

background: rgba(73,155,234,1);
background: -moz-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -o-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: linear-gradient(to right, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
 padding-top: 62px;
 color: white;
 padding-bottom: 145px;

}

.title {
	font-size: 37px;
	font-family: 'Unbutu', sans-serif;
}

.intro {
	font-size: 16px;
    font-family: 'Unbutu', sans-serif;
    width: 380px;
    margin-top: 40px;
}

.btn {

	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	color: black;
	background: #ffd429;
	display: block;
	padding: 15px 0;
	text-decoration: none;
	text-align: center;
	width: 223px;
	font-weight: 900;
	margin-top: 40px;
}

.offer {
  margin-top: 123px;
  width: 570px;
}

Вопрос задан более трёх лет назад
183 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

swerzy @swerzy Автор вопроса

а текст ?

Написано более трёх лет назад
Имя Фамилия @Squdward
swerzy, В вашем случае, проще обернуть их и в div, и задать ему

.div{ display: flex; justify-content: space-between; }

p.s тогда у картинки float уберите
Написано более трёх лет назад
swerzy @swerzy Автор вопроса

Имя Фамилия, сделал, не робит

Написано более трёх лет назад
Имя Фамилия @Squdward

swerzy, А вы задали ему класс? и обратились по нему же?

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

9 комментариев

swerzy @swerzy Автор вопроса

получилось так :(

Написано более трёх лет назад
swerzy @swerzy Автор вопроса

Весь этот проект шняк, смотришь урок и остаешься один не зная что делать роишь весь инет в поисках нужного кода, я выучил пару тегов и все, не могу верстать нормально

Написано более трёх лет назад
Дюша Метёлкин @Neobezatelno

swerzy, это ужасно

Написано более трёх лет назад
swerzy @swerzy Автор вопроса

Дюша Метёлкин, а где вы учились ? Подскажите и какой у вас стаж ? Стоит ли учить эти языки, какой заработок ?

Написано более трёх лет назад
Дюша Метёлкин @Neobezatelno

swerzy, я учился сам в интернете читал информацию, в наше время платить за обучение не обязательно вся информация доступна бесплатна - в интернете, занимаюсь этим вот уже 2 год, зарабатываю по разному могу и 40 могу и 100

Написано более трёх лет назад
swerzy @swerzy Автор вопроса

Дюша Метёлкин, 100 ????

Написано более трёх лет назад
Дюша Метёлкин @Neobezatelno

swerzy, конечно если за месяц возьму парочку больших проектов

Написано более трёх лет назад
swerzy @swerzy Автор вопроса

Дюша Метёлкин, советую вам сделать свои курсы по HTML и CSS за деньги, многому научите )) мне один бесплатный за идею дайте только ))

Написано более трёх лет назад
Дюша Метёлкин @Neobezatelno

swerzy, Это идея не нова), чтобы такое запустить надо сделать имя в медиа просторах - развивать ютуб инсту, у меня пока на это времени нету)

Написано более трёх лет назад

9 комментариев

Дюша Метёлкин @Neobezatelno

Воспользуйтесь моим кодом и у вас всё получится

Написано более трёх лет назад
swerzy @swerzy Автор вопроса

Дюша Метёлкин, так и сделал ))))

Написано более трёх лет назад
Дюша Метёлкин @Neobezatelno

swerzy, мою html разметку тоже скопировали ?

Написано более трёх лет назад
swerzy @swerzy Автор вопроса

Дюша Метёлкин, да

Написано более трёх лет назад
Дюша Метёлкин @Neobezatelno

swerzy, но ведь у меня в песочнице всё работает, значит оплошность на вашей стороне

Написано более трёх лет назад

swerzy @swerzy Автор вопроса

Дюша Метёлкин, скопировал у вас код:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
   <title>Домашка</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id="header" class="header">
  <div class="container">
<div class="andrey">
        <div class="img-box">
      <img src="111/logo.png" alt="WAYUP"> </div>
          <div class="img-box">
      <img src="111/111.png" alt="desktop" class="desktop">
    </div>
</div>


<div class="andrey">
      <div class="offer">
      <h1 class="title">
        С помощью верстки
        я создам ту жизнь, о которой
        мечтаю!
      </h1>
      <p class="intro">
        Мои стремления + настойчивость позволят мне достичь чего угодно. Я не верю в это. Я знаю это на 100%. Меня не остановить!
      </p>
      <a href="#" class="btn">Двигаться к мечте!</a>
    </div>
        <div class="offer">

      <img src="https://i2.rozetka.ua/goods/16718236/40559048_images_16718236305.jpg" alt="">
    </div>
</div>


  </div>

</header>

<section id="learn" class="learn">
  <div class="container">

  </div>
</section>
<section id="mail" class="mail">
  <div class="container">

  </div>
</section>
<footer id="footer" class="footer">

  <div class="container">
  </div>
</footer>

 </body>
 </html>

body {
  padding: 0;
  margin: 0;
}


.container {
  width:1170px;
  margin: auto;


}

.header {

background: rgba(73,155,234,1);
background: -moz-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -o-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: linear-gradient(to right, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
 padding-top: 62px;
 color: white;
 padding-bottom: 145px;

}

.title {
  font-size: 37px;
  font-family: 'Unbutu', sans-serif;
}

.intro {
  font-size: 16px;
    font-family: 'Unbutu', sans-serif;
    width: 380px;
    margin-top: 40px;
}

.btn {

  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: black;
  background: #ffd429;
  display: block;
  padding: 15px 0;
  text-decoration: none;
  text-align: center;
  width: 223px;
  font-weight: 900;
  margin-top: 40px;
}

.offer {
  margin-top: 123px;
  width: 570px;
}
.andrey {
  display: flex;
  justify-content: space-between;

Написано более трёх лет назад

Дюша Метёлкин @Neobezatelno

swerzy, 111/111.png - это ваша картинка чемоданов ?
в html разметку на эту замените
snippet

Написано более трёх лет назад
swerzy @swerzy Автор вопроса

Дюша Метёлкин, cпасибо помог ли

Написано более трёх лет назад
Дюша Метёлкин @Neobezatelno

swerzy, обращайся

Написано более трёх лет назад