-1

Preciso colocar este exemplo na minha página de html usando uma tabela ou então listas.

Gostaria de saber como faço pois não estou conseguindo e qual a melhor forma por favor.

Quero que fique desta forma na minha página

1
  • 1
    Só pra comentar, não é uma resposta, então entenda como uma critica construtiva, HTML5 são novas tags, mas não quer dizer que deixará de usar tags "antigas" como <div>, precisa primeiro entender o que é HTML. No html5 na verdade você só tem mais tags e mais funcionalides (API) pra controle de certas funções do DOM.
    – Syzoth
    1/04/2016 às 13:34

2 Respostas 2

1

Utilizando HTML puro eu consegui chegar com esse código. Espero que seja isso que você está procurando.

JSFiddle: https://jsfiddle.net/Lg55n17o/

HTML:

<div id="div-left">
    <div class="image">
          Image 1
    </div>
    <div class="image">
          Image 2
    </div>
    <div class="image">
          Image 3
    </div>
</div>
<div id="div-center">
    <div class="image big">
         Image 4
    </div>
    <div class="image small">
         Image 5
    </div>
</div>
<div id="div-right">
    <div class="image">
         Image 6
    </div>
    <div class="image">
         Image 7
    </div>
    <div class="image">
         Image 8
    </div>
</div>

CSS:

.image{
    height: 100px;
    line-height: 100px;/*Somente para colocar o label no centro*/
    border: 1px solid; /*So para delimitar as div visualmente*/
    text-align: center;/*Somente para colcoar o label no centro*/
}

.big{
    height: 250px;
    line-height: 250px;/*Somente para colocar o label no centro*/
}

.small{
    height: 50px;
    line-height: 50px;/*Somente para colocar o label no centro*/
}

#div-left, #div-center, #div-right{
    float:left;
}

#div-left, #div-right{
    width: 20%;
}

#div-center{
    width: 60%;
}
0

Eu recomendo que faça com flexbox, já que ficará simples e a maioria dos navegadores suportam.

Leia esse guia para entender melhor: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Mesmo que não entenda muito inglês peço que se esforce e o use o translate do google se precisar, mas leia com paciência e recise todos os exemplos até o final. Garanto que não terá nenhum tipo de problema com layouts após estudar flexbox.

Bons estudos!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .