3

Estou fazendo um site em que uma das páginas é responsável por listar as publicações do usuário em forma de caixas. Cada caixa corresponde a uma nova publicação do usuário, que é gerada pelo código em ASP.NET MVC 4 com Entity Framework 6 automaticamente, pegando as informações do banco. Duplicando as divs no html e a formatação do layout dessas divs em css, amostrando e criando links, tudo perfeito.

Mas quando é inserido uma nova caixa de publicação, ela vai para baixo da anterior e eu queria que ficasse do lado e fosse descendo com css.

Utilizei uma tag em css que é float:left, porém a div central do corpo da página não fica com a height responsiva quando um elemento é float, pois para mantê-la responsiva eu não defini a altura, só defini um padding-bottom.

Queria saber como faço para as caixas irem pro lado direito e descerem conforme forem geradas automaticamente e manter responsivo a height do corpo da página?

Exemplo:inserir a descrição da imagem aqui

2
  • Sugiro que alteres a tua questão e a tornes mais intuitiva e de fácil leitura, esta bem confuso... Aproveita e acrescenta código que possa ser relevante Commented 3/12/2014 às 12:56
  • Se bem entendi, pois ta extremamente confusa sua pergunta, você quer que se layout seja responsivo certo ? Antes mais nada, qual a versão do MVC ? Porque de uns tempos pra cá, o MVC já vem com o bootstrap cara. Aprende a parte de grids que vai te ajudar nessa sua questão. Mas de qualquer forma, põe os códigos que já fez ? Commented 3/12/2014 às 13:03

2 Respostas 2

1

Esse é um problema um tanto complexo envolvendo o CSS da aplicação. É um dos problemas que o Bootstrap se propõe a resolver.

Grosso modo, o que você precisa fazer é o seguinte:

.minha_div_celula {
    width: 33.33333333%;
    float: left;
}

Além disso, a <div> que comporta as <div> filhas deve ter algo como:

.div_mae {
    width: 100%;
    float: left;
}

Pode ser necessário usar uma <div> de clearfix para fazer o browser entender que as <div> filhas acabaram, e que uma nova <div> deve ser gerada fora do conjunto anterior mãe-filhas.

Tenho uma estamparia cujo site implementa exatamente isso que você quer fazer.

1

Uma solução bem simples seria colocar o estilo overflow: hidden no elemento que é o contêiner dos blocos. E para estes blocos, usar o float: left.

Veja nesse exemplo se é o que você quer:

var conteiner = document.getElementById("conteiner");
var btn = document.getElementById("btn");
btn.addEventListener("mousedown", function() {
    conteiner.innerHTML += "<div class='bloco'></div>"
});
.bloco {
    width: 50px;
    height: 50px;
    border: 8px solid red;
    float: left;
    margin: 4px;
}
#conteiner {
    overflow: hidden;
    border: 2px solid black;
    width: 240px;
}

button {
  margin: 5px;
}
Clique no botão para adicionar vários blocos sucessivamente.<br/>
<button id="btn">Adicionar novo bloco</button>
<div id="conteiner">
    <div class='bloco'></div>
</div>

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 .