Home / Questions / 399655
Accepted
Valentina
Asked: 2021-10-21 00:23:50 +0800 CST 2021-10-21 00:23:50 +0800 CST

How to create flexboox responsive design boxes?

  • 772

I have the following layout structure very elegant in its way of adapting on very small screens each column turns to 100%.

.bg-dark-1 {
    background-color: #1A1A1A;
}
.module-1 {
    display: flex;
    flex: 1;
}
.col-cover-five {
    flex: 1;
    order: 1;
}
.col-flex {
    display: flex;
}
.col-1 {
    display: flex;
    flex: 2;
    flex-direction: column;
}
.col-grid {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.col-text {
    width: 25%;
    order: 3;
}
.text-category {
    overflow-y: scroll;
    max-height: 40em;
}
.date-text h4 {
    color: rgba(58, 134, 68, 0.9);
    font-size: .875em;
    text-transform: uppercase;
    margin: 0.5em 0;
}
.date-text ul li {
    display: block;
    margin: .5em 0;
    white-space: normal;
}
.date-text ul li a {
    color: #B7B7B7;
    font-size: .875em;
    text-decoration: none;
}

.post {
    margin: 0.7em;
    overflow: hidden;
}
.post-module-x2 {
    width: 100%;
    position: relative;
    display: flex;
}
.thumbnail-left.max img {
    max-height: 12em;
    max-width: 50em;
}
.post-content-x2 {
    padding-left: 1em;
}
/**/
.post-module {
    overflow: hidden;
}
.module-width {
    width: 390px;
}
.module-full {
    width: 100%;
}
.post-module .post-content{
    margin-top: -5px;
    width: 100%;
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 200px;
}
.thumbnail img {
    width: 100%;
    object-fit: cover;
}
.pixels-img-x2 img {
    height: 200px;
}
.pixels-img-x3 img {
    height: 300px;
}
.pixels-img-x35 img {
    height: 350px;
}
.post-module .post-content p{
    font-size: 13px;
    margin-bottom: 1.5em;
}
.post-date img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 40px;
    margin-right: 10px;
}
.post-module .post-date{
    display: flex;
    align-items: center;
    margin-top: auto;
}
.thumbnail {
    position: relative;
}
.date {
    position: absolute;
    min-width: 48px;
    min-height: 48px;
    background-color: #fff;
    color: #700877;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    text-align: center;
    text-transform: uppercase;
    top: 20px;
    right: 20px;
    z-index: 1;
}
.date * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.date span {
    display: block;
    line-height: 14px;
}
.date .month {
    font-size: 11px;
}

.post-date small{
    color: #888;
}
<div class="box module-1 bg-dark-1">
                            <div class="col-cover-five">
                                <div class="box col-flex">
                                    <div class="col-1"><div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">22 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div>
                                    </div>
                                </div></div><div class="col-grid"><div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">22 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/ZGd83BY.jpg" alt="Salida de jugadores">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div>
                                    </div>
                                </div><div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">18 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2>
                                        </a>
                                        <p class="result">Pablo Repetto con problemas al definir su once titular</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Hace 4 días</span>
                                        </div>
                                    </div>
                                </div></div>                                </div>
                            </div>
                            <div class="col-text">
                                <div class="text-category">
                                    <div class="date-text">
                                        <h4>Titulo Principal</h4>
                                        <ul>
                                            <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                                            <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

However, what I want to achieve is to create a grid of 5, except for some aspects of the design, having 3 rows of smaller images and the two larger ones, by using flexbox it is possible but I cannot find the changes that should be perform to look like this:

enter image description here

Note: That the changes that must be made are only in this HTML structure and css style

<div class="box col-flex">
    <div class="col-1"></div>
    <div class="col-grid"></div>
</div>
html5

2 Answers

  1. If I understand you correctly you can use display: gridand grid-template-columnson the outer grid and grid-template-columns: autoinside a grid item.

    <div class="grid-container">
  <div class="grid-articulo">
    <div class="grid-articulo-container">
      <div class="grid-articulo-largo"></div>
    </div>
  </div>
</div>

    This example doesn't have correct CSS, but it shows the grid:

    .col-flex {
  display: grid;
  grid-template-columns: 50% 35% auto;
}

.col-1,
.col-grid,
.col-text {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 16px;
}


}
.grid-articulo {
  grid-template-columns: auto;
}
.grid-articulo-largo img,
.grid-articulo-medio img {
  width: 100%
}
.thumbnail {
  position: relative;
}
.date {
  position: absolute;
  min-width: 48px;
  min-height: 48px;
  background-color: #fff;
  color: #700877;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 0;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  top: 20px;
  right: 20px;
  z-index: 1;
  text-align: center;
}
.date * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.date span {
  display: block;
  line-height: 14px;
}
.date .month {
  font-size: 11px;
}
.post-date small {
  color: #888;
}
h2 {
  font-size: 18px;
}
@media only screen and (max-width:640px) {
  .col-flex {
    grid-template-columns: auto;
  }
}
    <div class="box module-1 bg-dark-1">
  <div class="col-cover-five">
    <div class="box col-flex">
      <div class="col-1">
        <div class="grid-articulo grid-articulo-largo">
          <div class="thumbnail">
            <div class="date">

              <span class="day">22 </span>
              <span class="month">Nov</span>

            </div>
            <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
          </div>
          <div class="text-horizontal">
            <a href="#">
              <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
            </a>
            <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
            <div class="post-date">
              <span class="timestamp colr-white2">Justo ahora</span>
            </div>
          </div>
        </div>
        <div class="grid-articulo grid-articulo-largo">
          <div class="thumbnail">
            <div class="date">

              <span class="day">22 </span>
              <span class="month">Nov</span>

            </div>
            <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
          </div>
          <div class="text-horizontal">
            <a href="#">
              <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
            </a>
            <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
            <div class="post-date">
              <span class="timestamp colr-white2">Justo ahora</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-grid">
        <div class="grid-articulo grid-articulo-medio">
          <div class="thumbnail">
            <div class="date">

              <span class="day">22 </span>
              <span class="month">Nov</span>

            </div>
            <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
          </div>
          <div class="text-horizontal">
            <a href="#">
              <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
            </a>
            <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
            <div class="post-date">
              <span class="timestamp colr-white2">Justo ahora</span>
            </div>
          </div>
        </div>
        <div class="grid-articulo grid-articulo-medio">
          <div class="thumbnail">
            <div class="date">

              <span class="day">18 </span>
              <span class="month">Nov</span>

            </div>
            <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias">
          </div>
          <div class="text-horizontal">
            <a href="#">
              <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2>
            </a>
            <p class="result">Pablo Repetto con problemas al definir su once titular</p>
            <div class="post-date">
              <span class="timestamp colr-white2">Hace 4 días</span>
            </div>
          </div>
        </div>
        <div class="grid-articulo grid-articulo-medio">
          <div class="thumbnail">
            <div class="date">

              <span class="day">18 </span>
              <span class="month">Nov</span>

            </div>
            <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias">
          </div>
          <div class="text-horizontal">
            <a href="#">
              <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2>
            </a>
            <p class="result">Pablo Repetto con problemas al definir su once titular</p>
            <div class="post-date">
              <span class="timestamp colr-white2">Hace 4 días</span>
            </div>
          </div>
        </div>
      </div>

      <div class="col-text">
        <div class="grid-articulo">
          <div class="date-text">
            <h4>Titulo Principal</h4>
            <ul>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    And if you want the articles to occupy 100% of the page on mobile. You can use media queries:

    @media only screen and (max-width:640px) {
  .col-flex {
    grid-template-columns: auto;
  }
}
    • 4
  2. Best Answer

    As they had already commented, it is much simpler to do it with css gridbut if you want to keep the same style rules, you simply only had to add one more article inside <div class="col-1"></div>that is, said container must contain two articles and, in <div class="col-grid"></div>adding one more article, a total of 3 and, in this way, following the same style rules, we obtain as a result what is desired from the posted image:

    .bg-dark-1 {
    background-color: #1A1A1A;
}
.module-1 {
    display: flex;
    flex: 1;
}
.col-cover-five {
    flex: 1;
    order: 1;
}
.col-flex {
    display: flex;
}
.col-1 {
    display: flex;
    flex: 2;
    flex-direction: column;
}
.col-grid {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.col-text {
    width: 25%;
    order: 3;
}
.text-category {
    overflow-y: scroll;
    max-height: 40em;
}
.date-text h4 {
    color: rgba(58, 134, 68, 0.9);
    font-size: .875em;
    text-transform: uppercase;
    margin: 0.5em 0;
}
.date-text ul li {
    display: block;
    margin: .5em 0;
    white-space: normal;
}
.date-text ul li a {
    color: #B7B7B7;
    font-size: .875em;
    text-decoration: none;
}

.post {
    margin: 0.7em;
    overflow: hidden;
}
.post-module-x2 {
    width: 100%;
    position: relative;
    display: flex;
}
.thumbnail-left.max img {
    max-height: 12em;
    max-width: 50em;
}
.post-content-x2 {
    padding-left: 1em;
}
/**/
.post-module {
    overflow: hidden;
}
.module-width {
    width: 390px;
}
.module-full {
    width: 100%;
}
.post-module .post-content{
    margin-top: -5px;
    width: 100%;
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 200px;
}
.thumbnail img {
    width: 100%;
    object-fit: cover;
}
.pixels-img-x2 img {
    height: 200px;
}
.pixels-img-x3 img {
    height: 300px;
}
.pixels-img-x35 img {
    height: 350px;
}
.post-module .post-content p{
    font-size: 13px;
    margin-bottom: 1.5em;
}
.post-date img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 40px;
    margin-right: 10px;
}
.post-module .post-date{
    display: flex;
    align-items: center;
    margin-top: auto;
}
.thumbnail {
    position: relative;
}
.date {
    position: absolute;
    min-width: 48px;
    min-height: 48px;
    background-color: #fff;
    color: #700877;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    text-align: center;
    text-transform: uppercase;
    top: 20px;
    right: 20px;
    z-index: 1;
}
.date * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.date span {
    display: block;
    line-height: 14px;
}
.date .month {
    font-size: 11px;
}

.post-date small{
    color: #888;
}
    <div class="box module-1 bg-dark-1">
    <div class="col-cover-five">
        <div class="box col-flex">
            <div class="col-1">
                <div class="post">
                                    <div class="thumbnail">
                                        <div class="date">                  
                        <span class="day">22 </span>
                        <span class="month">Nov</span>
        
                        </div>
                            <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
                        </div>
                        <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div></div>
                </div>
                <div class="post">
                                    <div class="thumbnail">
                                        <div class="date">                  
                        <span class="day">22 </span>
                        <span class="month">Nov</span>
        
                        </div>
                            <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
                        </div>
                        <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div></div>
                </div>     
            </div>
                
                
                <div class="col-grid">
                <div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">22 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/ZGd83BY.jpg" alt="Salida de jugadores">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div>
                                    </div>
                                </div>
                <div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">22 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/ZGd83BY.jpg" alt="Salida de jugadores">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">18 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2>
                                        </a>
                                        <p class="result">Pablo Repetto con problemas al definir su once titular</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Hace 4 días</span>
                                        </div>
                                    </div>
                                </div>
                </div>
                </div>
                            </div>
                            <div class="col-text">
                                <div class="text-category">
                                    <div class="date-text">
                                        <h4>Titulo Principal</h4>
                                        <ul>
                                            <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                                            <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

    • 1