Я пытаюсь поместить результаты (боковую панель) игр в соответствие только с HTML и CSS.Сейчас я застрял на том, как поставить все игры по центру.
.row{
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 75em;
}
.coluna{
position: relative;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.row:before {
content: " ";
display: table;
}
.row:after {
clear: both;
}
#conteudo > div > div {
padding-top: 35px;
padding-bottom: 30px;
}
.colunas{
position: relative;
padding-left: 15px;
padding-right: 15px;
float: left;
width: 860px;
}
.menu-conteudo {
margin-top: -30px;
margin-right: -15px;
background: #33bd6c;
display: block;
clear: both;
overflow: hidden;
margin-bottom: 20px;
border-bottom: 1px solid #136e39;
}
article div.entrada-conteudo{
min-height: 165px;
}
div .entrada-conteudo p{
color: #595959;
font-size: 13px;
line-height: 20px;
text-align: justify;
}
.row .row {
width: auto;
margin-left: -15px;
margin-right: -15px;
margin-top: 0;
margin-bottom: 0;
max-width: none;
}
.images img{
width: 270px;
height: 200px;
}
.coluna article{
border-bottom: 1px solid #33bd6c;
margin-bottom: 40px;
width: 265px;
}
#conteudo .data {
color: #595959;
display: inline-block;
font-size: 12px;
margin-top: 20px;
font-weight: normal;
margin-bottom: 15px;
}
#conteudo h4.titulo {
line-height: 20px;
margin-top: 0;
margin-bottom: 20px;
color: #33bd6c;
}
#conteudo h4.titulo a {
color: #33bd6c;
font-family: "fs_hackney_webbold",sans-serif;
font-size: 18px;
}
.entrada-conteudo p{
color: #595959;
font-size: 13px;
line-height: 20px;
}
.texto{
margin-top: 40px;
padding-left: 22px;
width: 180px;
height: 100px;
display: inline-block;
position:relative;
}
.botao{
margin-top: 40px;
width: 90px;
height: 100px;
display: inline-block;
position:relative;
}
input[type="text"]{
background-color: #fff;
border: 1px none #cccccc;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
margin: 0 0 16px 0;
padding: 8px;
height: 37px;
font-size: 14px;
width: 100%;
box-sizing: border-box;
}
input[type="submit"]{
text-align: center;
border: none;
z-index: 2;
width: 100%;
padding-top: 0;
padding-bottom: 0;
border-style: solid;
border-width: 1px;
overflow: hidden;
font-size: 14px;
height: 37px;
line-height: 34px;
background-color: #33bd6c;
color: #fff;
}
input[type="submit"]:hover{
background-color: rgb(19,110,57);
}
.liga{
margin-top: -10px;
padding: 10px;
font-family: "fs_hackney_webbold",sans-serif;
font-size: 14px;
margin-left: 22px;
display: inline-block;
width: 255px;
background: #33bd6c;
color: #FFF!important;
border-bottom: 3px #136e39 solid;
margin-bottom: 0px!important;
}
#border-tabel{
border: 1px #cdcdcd solid;
display: inline-block;
margin-left: 22px;
width: 273px;
margin-bottom: 30px;
}
table#classificacao{
position: relative;
width: 100%;
}
#classificacao{
font-family: "fs_hackney_webbold",sans-serif;
font-size: 14px;
color: #626262;
}
#classificacao th{
color: #9b9b9b;
}
#classificacao tr, #classificacao th{
padding: 10px;
line-height: 14px;
}
#classificacao td{
position: static;
white-space: normal;
overflow: visible;
padding: 10px 12px;
border-top: 1px #dddddd solid;
}
#posicao{
color: #33bd6c;
}
.bordo-result{
border: 1px #cdcdcd solid;
border-top: 0px;
padding: 0 10px;
background: #FFF;
margin-left: 22px;
width: 253px;
display: inline-block;
}
.bordo-topo{
padding: 10px;
border-top: 1px #dddddd solid;
color: #626262;
font-size: 14px;
text-align: center;
}
.team{
color: #33bd6c;
}
<!-- Notícias e Barra Lateral -->
<div id="conteudo">
<div class="row">
<div class="colunas">
<div class="menu-conteudo">
</div>
<div class="entrada-conteudo">
<div class="row">
<div class="coluna">
<article>
<a class="images" href="#"><img src="assets/images/Noticias/Agenda-Formacao.png"/></a>
<h5 class="data">09-01-2019</h5>
<h4 class="titulo"><a href="#">Formação: Agenda Fim de Semana</a></h4>
<div class="entrada-conteudo"><p>Os Juniores vão à Vila das Aves para defrontar o 8º classificado, CD Aves. A equipa de Luís Silva venceu pela margem mínima na 1ª...</p></div>
</article>
</div>
<div class="coluna">
<article>
<a class="images" href="#"><img src="assets/images/Noticias/Agenda-Futsal.png"/></a>
<h5 class="data">09-01-2019</h5>
<h4 class="titulo"><a href="#">Futsal: Agenda Fim de Semana</a></h4>
<div class="entrada-conteudo"><p>Com apenas a equipa B a jogar fora, na Trofa, o Rio Ave FC vai ter um fim de semana cheio. Os Juniores jogam contra...</p></div>
</article>
</div>
<div class="coluna">
<article>
<a class="images" href="#"><img src="assets/images/Noticias/jogador.png"/></a>
<h5 class="data">08-01-2019</h5>
<h4 class="titulo"><a href="#">Diego e Borevkovic em fase de integração</a></h4>
<div class="entrada-conteudo"><p>O plantel principal trabalhou esta manhã, no relvado nº 2, no regresso ao trabalho e tendo já em vista o jogo com o Vitória FC,...</p></div>
</article>
</div>
<div class="coluna">
<article>
<a class="images" href="#"><img src="assets/images/Noticias/desc.png"/></a>
<h5 class="data">07-01-2019</h5>
<h4 class="titulo"><a href="#">O teu lugar anual está à tua espera. Adquire-o!</a></h4>
<div class="entrada-conteudo"><p>Rioavista já podes adquirir o teu lugar anual no Estádio do Rio Ave FC. Ao comprares agora o teu lugar tens acesso aos restantes 9...</p></div>
</article>
</div>
<div class="coluna">
<article>
<a class="images" href="#"><img src="assets/images/Noticias/setubal.png"/></a>
<h5 class="data">07-01-2019</h5>
<h4 class="titulo"><a href="#">Informação Bilhética: Rio Ave FC x Vitória FC</a></h4>
<div class="entrada-conteudo"><p>A partir de amanhã já estão à venda os bilhetes para o próximo jogo de domingo que põe frente a frente o Rio Ave FC...</p></div>
</article>
</div>
<div class="coluna">
<article>
<a class="images" href="#"><img src="assets/images/Noticias/Resultados-Futsal.png"/></a>
<h5 class="data">07-01-2019</h5>
<h4 class="titulo"><a href="#">Futsal: Resultados Fim de Semana</a></h4>
<div class="entrada-conteudo"><p>O Rio Ave FC voltou a não conseguir manter o empate em Porto Salvo, acabando por perder o encontro nos últimos minutos. Os Juniores perderam...</p></div>
</article>
</div>
<div class="coluna">
<article>
<a class="images" href="#"><img src="assets/images/Noticias/Resultados-Formacao.png"/></a>
<h5 class="data">07-01-2019</h5>
<h4 class="titulo"><a href="#">Formação: Resultados Fim de Semana</a></h4>
<div class="entrada-conteudo"><p>Os Juniores voltaram às vitórias frente ao FC Paços de Ferreira. Com 26 pontos, a equipa de Luís Silva está em 4º lugar. Os sub-10...</p></div>
</article>
</div>
<div class="coluna">
<article>
<a class="images" href="#"><img src="assets/images/Noticias/treinador.png"/></a>
<h5 class="data">07-01-2019</h5>
<h4 class="titulo"><a href="#">Jogar olhos nos olhos e… perder</a></h4>
<div class="entrada-conteudo"><p>Numa atitude de ataque e com propósito de jogo ofensivo, o Rio Ave FC apresentou-se na Luz dividindo todos os itens estatísticos… menos os golos....</p></div>
</article>
</div>
<div class="coluna">
<article>
<a class="images" href="#"><img src="assets/images/Noticias/EquipaB.png"/></a>
<h5 class="data">07-01-2019</h5>
<h4 class="titulo"><a href="#">Equipa B: Derrota pesada diante do Valadares FC</a></h4>
<div class="entrada-conteudo"><p>Iniciou hoje a segunda volta da Divisão D´Elite da AF Porto com o Rio Ave FC “B” a deslocar-se ao terreno do Valadares FC. O...</p></div>
</article>
</div>
</div>
</div>
</div>
<!-- Barra-Lateral -->
<div class="barra-lateral">
<div class="row">
<div class="texto">
<input type="text" name="pesq" placeholder="Pesquisar">
</div>
<div class="botao">
<input type="submit" value="Pesquisar">
</div>
<h4 class="liga">Liga NOS</h4>
<div id="border-tabel"> <table id="classificacao">
<tr>
<th>Pos</th>
<th>Equipa</th>
<th>J</th>
<th>Pts</th>
</tr>
<tr>
<td>1</td>
<td>FC Porto</td>
<td>18</td>
<td>46</td>
</tr>
<tr>
<td>2</td>
<td>SL Benfica</td>
<td>18</td>
<td>41</td>
</tr>
<tr>
<td>3</td>
<td>SC Braga</td>
<td>18</td>
<td>40</td>
</tr>
<tr>
<td>4</td>
<td>Sporting CP</td>
<td>18</td>
<td>38</td>
</tr>
<tr>
<td>5</td>
<td>Belenenses</td>
<td>18</td>
<td>29</td>
</tr>
<tr>
<td>6</td>
<td>Vitória SC</td>
<td>18</td>
<td>28</td>
</tr>
<tr>
<td>7</td>
<td>Moreirense FC</td>
<td>18</td>
<td>28</td>
</tr>
<tr>
<td>8</td>
<td>Portimonense</td>
<td>18</td>
<td>27</td>
</tr>
<tr>
<td>9</td>
<td>Sta. Clara</td>
<td>18</td>
<td>21</td>
</tr>
<tr id="posicao">
<td>10</td>
<td>Rio Ave FC</td>
<td>18</td>
<td>21</td>
</tr>
<tr>
<td>11</td>
<td>Marítimo M.</td>
<td>18</td>
<td>20</td>
</tr>
<tr>
<td>12</td>
<td>CD Tondela</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>13</td>
<td>Vitória FC</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>14</td>
<td>CD Nacional</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>15</td>
<td>Boavista FC</td>
<td>18</td>
<td>16</td>
</tr>
<tr>
<td>16</td>
<td>CD Aves</td>
<td>18</td>
<td>15</td>
</tr>
<tr>
<td>17</td>
<td>CD Feirense</td>
<td>18</td>
<td>14</td>
</tr>
<tr>
<td>18</td>
<td>GD Chaves</td>
<td>18</td>
<td>12</td>
</tr>
</table>
</div>
<h2 class="liga">Últimos Resultados</h2>
<div class="bordo-result">
<div class="bordo-topo">
<span class="team">Rio Ave</span> 0 - 0 CD Feirense
</div>
<div class="bordo-topo">
<span class="team">Rio Ave</span> 1 - 1 Vitória FC
</div>
<div class="bordo-topo">
SL Benfica 4 - 2 <span class="team">Rio Ave</span>
</div>
<div class="bordo-topo">
<span class="team">Rio Ave</span> 1 - 2 Moreirense FC
</div>
<div class="bordo-topo">
FC Porto 2 - 1 <span class="team">Rio Ave</span>
</div>
</div>
</div>
</div>
<!-- /Barra-Lateral -->
Итак, я уже пытался поставить 3 деления, то есть 1 для домашней команды, для результата и для команды, чтобы отыграть, но всевсегда в плохой форме.В настоящее время у меня есть только 1 div для всего, но все еще испорчено
Любая помощь будет оценена.