Мне нужно разместить блоки div
в ряд, примерно 7 штук, потом еще 7 штук под ними.
Но пока что хотя бы первые 7.
#content {
margin: 10px 560px 0 300px;
padding: 5px 20px;
background: #EAEAEA;
box-shadow: 0 1px 5px -2px black;
font-family: calibri;
text-decoration: none;
color: #191919;
width: 700px;
}
#portrait-block {
background-image: url(bg.jpg);
width: 160px;
height: 276px;
border: 2px solid #D1D1D1FF;
margin: 10px 0;
}
#portrait-text {
font-family: BigNoodleTitling;
src: url(big-noodle.ttf);
font-family: BigNoodleTitling, Calibri, Arial;
font-style: italic;
color: #E2E2E2FF;
background-color: rgba(0, 42, 69, 0.8);
text-align: center;
font-size: 20pt;
padding: 18px;
position: relative;
top: -97px;
}
<div id="content">
<div id="portrait-block">
<img src="imgs/hero-select-portrait.png" class="portrait" width="160" height="276">
<div>
<p id="portrait-text">DOOMFIST</p>
</div>
</div>
<div id="portrait-block">
<img src="imgs/genji.png" class="portrait" width="160" height="276">
<div>
<p id="portrait-text">GENJI</p>
</div>
</div>
</div>
Пробовал с float
-ом, но тогда фоновый див уже не под этими двумя блоками.