БЛОГ НА HUSL


Как сделать колонки в строку

Автор вопроса: Zesshi

Вопрос таков,есть задание сделать 4 колонки и чтобы они были в строку,у меня уже всё сделано,но почему-то у меня текст и заголовки выводятся блочно друг под другом и не понимаю как это исправить Код:

body {
  font-family: arial, sans-serif;
  margin: 0;
}

.header {
  background-color: #02918c;
  padding: 20px 0;
  text-align: center;
}


.container {
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: inline-block;
  margin-bottom: 10px;
}

.main-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 15px;
}

.main-pic {
  background-image: url(../images/main-pic.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  color: #fff;
  padding: 150px 0;
}

.main-slogan {
  color: #fff;
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 10px;
  text-transform: uppercase;
  margin-bottom: 0;
}

.main-text {
  margin-top: 0;
  color: #fff;
  font-size: 18px;
  line-height: 33px;
}

.know-more {
  display: inline-block;
  color: black;
  background-color: #cfc91d;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 30px;
  text-transform: uppercase;
  margin-top: 150px;
  margin-bottom: 60px;
}

.about-me {
  margin-top: 100px;
  text-align: center;
  text-transform: uppercase;
  font-size: 46px;
  font-weight: bold;
  color: #02918c;
}

.second-text {
  color: #7e8287;
  font-size: 16px;
  text-align: center;
}

.columns {
  display: inline;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>MyFolio</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <header class="header">
    <div class="container">
      <a href="" class="logo">
        <img src="images/logo.png" alt="MyFolio">
      </a>
      <nav class="main-menu">
        <a href="#">HOME</a>
        <a href="#">PREMIUM PSD FILES</a>
        <a href="#">UI KITS</a>
        <a href="#">SERVICES</a>
        <a href="#">MY WORKS</a>
        <a href="#">CONTACT ME</a>
      </nav>
    </div>
  </header>
  <div class="main-pic">
    <div class="container">
      <h1 class="main-slogan">Incididunt Bore</h1>
      <p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cum sint ducimus. Hic quo nobis aspernatur, iste ut voluptate voluptatum repudiandae! Aut architecto eligendi repellat asperiores, voluptatibus, odio deserunt dignissimos dicta laudantium,
        voluptatem minima praesentium sed tempore dolorum dolores excepturi. Quis, commodi aperiam maiores dolore a perferendis nostrum enim tempore.</p>
      <a href="#" class="know-more">Know more</a>
    </div>
  </div>
  <div class="container">
    <h2 class="about-me">About me</h2>
    <p class="second-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque deserunt maiores, facere error consequuntur amet quaerat voluptatem nobis. <strong>Maiores ea, facere vel reprehenderit deserunt</strong> cupiditate, animi aut enim officiis impedit
      corporis autem dolore, dignissimos laudantium fugit illum! Aspernatur, molestiae, quibusdam. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.</p>
    <div>
      <div class="columns">
        <h3 class="columns second-slogan">Our Story</h3>
        <p class="third-text">Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="columns">
        <h3 class="columns second-slogan">Recomendations</h3>
        <p class="third-text">Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="columns">
        <h3 class="columns second-slogan">The Main Event</h3>
        <p class="third-text">Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="columns">
        <h3 class="columns second-slogan">Our Clients</h3>
        <p class="third-text">Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>


</body>

</html>

Выходит это Выходит это

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

Когда нужно это

Пытался применить display:inline; Но оно почему то не работает и не хочет чтобы текст и заголовок был в строку


Источник

Ответы (1 шт):

Автор решения: Vladimir Gonchar

Буквально одной строчкой CSS – display: flex; на обертке.

body {
  font-family: arial, sans-serif;
  margin: 0;
}

.header {
  background-color: #02918c;
  padding: 20px 0;
  text-align: center;
}


.container {
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: inline-block;
  margin-bottom: 10px;
}

.main-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 15px;
}

.main-pic {
  background-image: url(../images/main-pic.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  color: #fff;
  padding: 150px 0;
}

.main-slogan {
  color: #fff;
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 10px;
  text-transform: uppercase;
  margin-bottom: 0;
}

.main-text {
  margin-top: 0;
  color: #fff;
  font-size: 18px;
  line-height: 33px;
}

.know-more {
  display: inline-block;
  color: black;
  background-color: #cfc91d;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 30px;
  text-transform: uppercase;
  margin-top: 150px;
  margin-bottom: 60px;
}

.about-me {
  margin-top: 100px;
  text-align: center;
  text-transform: uppercase;
  font-size: 46px;
  font-weight: bold;
  color: #02918c;
}

.second-text {
  color: #7e8287;
  font-size: 16px;
  text-align: center;
}

.columns {
  display: flex;
  justify-content: center;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>MyFolio</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <header class="header">
    <div class="container">
      <a href="" class="logo">
        <img src="images/logo.png" alt="MyFolio">
      </a>
      <nav class="main-menu">
        <a href="#">HOME</a>
        <a href="#">PREMIUM PSD FILES</a>
        <a href="#">UI KITS</a>
        <a href="#">SERVICES</a>
        <a href="#">MY WORKS</a>
        <a href="#">CONTACT ME</a>
      </nav>
    </div>
  </header>
  <div class="main-pic">
    <div class="container">
      <h1 class="main-slogan">Incididunt Bore</h1>
      <p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cum sint ducimus. Hic quo nobis aspernatur, iste ut voluptate voluptatum repudiandae! Aut architecto eligendi repellat asperiores, voluptatibus, odio deserunt dignissimos dicta laudantium,
        voluptatem minima praesentium sed tempore dolorum dolores excepturi. Quis, commodi aperiam maiores dolore a perferendis nostrum enim tempore.</p>
      <a href="#" class="know-more">Know more</a>
    </div>
  </div>
  <div class="container">
    <h2 class="about-me">About me</h2>
    <p class="second-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque deserunt maiores, facere error consequuntur amet quaerat voluptatem nobis. <strong>Maiores ea, facere vel reprehenderit deserunt</strong> cupiditate, animi aut enim officiis impedit
      corporis autem dolore, dignissimos laudantium fugit illum! Aspernatur, molestiae, quibusdam. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.</p>
    <div class="columns">
      <div class="column">
        <h3 class="columns second-slogan">Our Story</h3>
        <p class="third-text">Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="column">
        <h3 class="columns second-slogan">Recomendations</h3>
        <p class="third-text">Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="column">
        <h3 class="columns second-slogan">The Main Event</h3>
        <p class="third-text">Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="column">
        <h3 class="columns second-slogan">Our Clients</h3>
        <p class="third-text">Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>


</body>

</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.