Как разделить место на логотипы поровну

Question

Доброй ночи.Нужно поделить место поровну на 4 логотипа. Придумал только так , но понимаю что тогда не смогу задать всем разные background-image . Как подправить ?

.resources{
  display: flex;
  flex-direction: column;
padding:100px 0 217px;
}
.logo-zone{
  width: 1100px;
  margin: 80px auto 0 auto;
  height: 38px;
  display: flex;
  
}
.resources__logo {
  flex: 0 1 100%;
  height: 38px;

}
div{
  border: solid red 1px;
}

 <div class="logo-zone">
            <div class="resources__logo"></div>
  <div class="resources__logo"></div>
  <div class="resources__logo"></div>
  <div class="resources__logo"></div>
        </div>

   https://codepen.io/camobap6/pen/QWjeExa

Answer 1

Воспользуйтесь псевдоклассом :nth-child.
Ссылка

.resources {
  display: flex;
  flex-direction: column;
  padding: 100px 0 217px;
}

.logo-zone {
  width: 600px;
  margin: 80px auto 0 auto;
  height: 38px;
  display: flex;
}

.resources__logo {
  flex: 0 1 100%;
  height: 38px;
}

div {
  border: solid red 1px;
}

.resources__logo:nth-child(1) {
  background-color: red;
}

.resources__logo:nth-child(2) {
  background-color: blue;
}

.resources__logo:nth-child(3) {
  background-color: green;
}

.resources__logo:nth-child(4) {
  background-color: yellow;
}

<div class="logo-zone">
  <div class="resources__logo"></div>
  <div class="resources__logo"></div>
  <div class="resources__logo"></div>
  <div class="resources__logo"></div>
</div>

Answer 2

Можно сделать используя дополнительные классы для фоновых изображений.

.resources{
  display: flex;
  flex-direction: column;
  padding:100px 0 217px;
}
.logo-zone{
  width: 1100px;
  margin: 80px auto 0 auto;
  height: 38px;
  display: flex;
  
}
.resources__logo {
  flex: 0 1 100%;
  height: 38px;

}
div{
  border: solid red 1px;
}

.red-bg {
  background-color: red;
  
}

.green-bg {
  background-color: green;
  
}

.blue-bg {
  background-color: blue;
  
}

.black-bg {
  background-color: black;
  
}

 <div class="logo-zone">
  <div class="resources__logo green-bg"></div>
  <div class="resources__logo red-bg"></div>
  <div class="resources__logo blue-bg"></div>
  <div class="resources__logo black-bg"></div>
        </div>

БЛОГ НА HUSL

Как разделить место на логотипы поровну

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