1

Подскажите как стилизовать контент, чтобы боксы шли один за другим

/* Container holding the image and the text */

.container {
  position: relative;
  text-align: center;
  color: white;
}


/* Bottom left text  CirceReg,sans-serif, PT Sans*/

.bottom-left {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 16px;
  font-family: CirceReg;
  font-weight: bold;
  width: 240px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  padding: 70px 15px 40px;
}


/* Top left text */

.top-left {
  position: absolute;
  top: 10px;
  left: 10px;
}


/* Top right text */

.top-right {
  position: absolute;
  top: 17px;
  right: 10px;
}


/* Bottom right text */

.bottom-right {
  background-color: ;
  font-family: PT Sans;
  font-size: 15px;
  border-radius: 0.1rem;
  position: absolute;
  bottom: 25px;
  left: 20px;
  padding: 5px;
}

.bottom-right1 {
  background-color: ;
  border-radius: 0.1rem;
  position: absolute;
  bottom: 25px;
  right: 20px;
  padding: 5px;
}


/* Centered text */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#myfontprogress {
  font-family: "PT Sans";
  font-size: 33px;
  color: #fff;
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 1px 5px #000;
  position: relative;
}
<div id="catalog" style="position: relative;width:fit-content;margin: 40px 40px 0;">
  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/009/952/387/large/pablo-dobarro-dev1.jpg?1521743024" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/027/457/629/large/noah-1.jpg?1591609325" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdna.artstation.com/p/assets/images/images/023/697/068/large/vadim-sadovski-dsc-5739-2-copy.jpg?1580068518" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/009/952/387/large/pablo-dobarro-dev1.jpg?1521743024" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/027/457/629/large/noah-1.jpg?1591609325" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdna.artstation.com/p/assets/images/images/023/697/068/large/vadim-sadovski-dsc-5739-2-copy.jpg?1580068518" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>
</div>

1 ответ 1

3

Добавьте основному контейнеру display: flex;:

#catalog {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

#catalog>a {
  box-shadow: 2px 5px 10px #0008;
}


/* Container holding the image and the text */

.container {
  position: relative;
  text-align: center;
  color: white;
}


/* Bottom left text  CirceReg,sans-serif, PT Sans*/

.bottom-left {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 16px;
  font-family: CirceReg;
  font-weight: bold;
  width: 240px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  padding: 70px 15px 40px;
}


/* Top left text */

.top-left {
  position: absolute;
  top: 10px;
  left: 10px;
}


/* Top right text */

.top-right {
  position: absolute;
  top: 17px;
  right: 10px;
}


/* Bottom right text */

.bottom-right {
  background-color: ;
  font-family: PT Sans;
  font-size: 15px;
  border-radius: 0.1rem;
  position: absolute;
  bottom: 25px;
  left: 20px;
  padding: 5px;
}

.bottom-right1 {
  background-color: ;
  border-radius: 0.1rem;
  position: absolute;
  bottom: 25px;
  right: 20px;
  padding: 5px;
}


/* Centered text */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#myfontprogress {
  font-family: "PT Sans";
  font-size: 33px;
  color: #fff;
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 1px 5px #000;
  position: relative;
}
<div id="catalog" style="position: relative;width:fit-content;margin: 40px 40px 0;">
  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/009/952/387/large/pablo-dobarro-dev1.jpg?1521743024" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/027/457/629/large/noah-1.jpg?1591609325" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdna.artstation.com/p/assets/images/images/023/697/068/large/vadim-sadovski-dsc-5739-2-copy.jpg?1580068518" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/009/952/387/large/pablo-dobarro-dev1.jpg?1521743024" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/027/457/629/large/noah-1.jpg?1591609325" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdna.artstation.com/p/assets/images/images/023/697/068/large/vadim-sadovski-dsc-5739-2-copy.jpg?1580068518" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>
</div>

Или сделайте сами блоки строчно-блочными (display: inline-block;):

#catalog {
  text-align: center;
}

#catalog>a {
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  box-shadow: 2px 5px 10px #0008;
}


/* Container holding the image and the text */

.container {
  position: relative;
  text-align: center;
  color: white;
}


/* Bottom left text  CirceReg,sans-serif, PT Sans*/

.bottom-left {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 16px;
  font-family: CirceReg;
  font-weight: bold;
  width: 240px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  padding: 70px 15px 40px;
}


/* Top left text */

.top-left {
  position: absolute;
  top: 10px;
  left: 10px;
}


/* Top right text */

.top-right {
  position: absolute;
  top: 17px;
  right: 10px;
}


/* Bottom right text */

.bottom-right {
  background-color: ;
  font-family: PT Sans;
  font-size: 15px;
  border-radius: 0.1rem;
  position: absolute;
  bottom: 25px;
  left: 20px;
  padding: 5px;
}

.bottom-right1 {
  background-color: ;
  border-radius: 0.1rem;
  position: absolute;
  bottom: 25px;
  right: 20px;
  padding: 5px;
}


/* Centered text */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#myfontprogress {
  font-family: "PT Sans";
  font-size: 33px;
  color: #fff;
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 1px 5px #000;
  position: relative;
}
<div id="catalog" style="position: relative;width:fit-content;margin: 40px 40px 0;">
  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/009/952/387/large/pablo-dobarro-dev1.jpg?1521743024" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/027/457/629/large/noah-1.jpg?1591609325" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdna.artstation.com/p/assets/images/images/023/697/068/large/vadim-sadovski-dsc-5739-2-copy.jpg?1580068518" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/009/952/387/large/pablo-dobarro-dev1.jpg?1521743024" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdnb.artstation.com/p/assets/images/images/027/457/629/large/noah-1.jpg?1591609325" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="container">
      <img src="https://cdna.artstation.com/p/assets/images/images/023/697/068/large/vadim-sadovski-dsc-5739-2-copy.jpg?1580068518" width="270" height="100%" style="margin:10px;" /><br />

      <div class="bottom-left">
        <h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
          Demo
        </h4>

      </div>
      <div class="bottom-right">
        Demo
      </div>
      <div class="bottom-right1">
        Demo
      </div>
      <div class="centered">
        <h1 id="myfontprogress">
          Example
        </h1>
      </div>
      <div class="top-right">
        Demo
      </div>
      <div class="top-left">
        <div class="grade grade--red" data-grade-score="">
          <p class="grade__score">Demo</p>
        </div>
      </div>
    </div>
  </a>
</div>

1
  • 1
    Спасибо сейчас попробую Commented 20 июл. 2021 в 3:22

Ваш ответ

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

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