1

Há tempos que estou tentando resolver este problema. sempre que eu crio um site usando div's que são float tenho o problema de sobrar um espaço em branco após a 1ª div na quebra de linha como no exemplo aqui:

http://jsfiddle.net/qxbxntvc/

queria saber como que eu faço para que não fique o espaço em branco entre a div vermelha e a rosa?

1

3 Respostas 3

2

Eu particulamente não consigo trabalhar com um sistema de grid onde a soma de todos os width excedem o 100%, no caso do seu exemplo o total das div dá 200%.

Neste caso eu usaria div aninhado

div.column
{
    width:50%;
    float:left
}
#a{height:50px;background:red}
#b{height:20px;background:green}
#c{height:60px;background:blue}
#d{height:40px;background:pink}
<div class="column">
    <div id="a">
        
    </div>
    <div id="c">
        
    </div>
</div>
<div class="column">
    <div id="b">
        
    </div>
    <div id="d">
        
    </div>
<div>

1
  • a soma não ultrapassa 100% porque quando você define uma DIV como float dentro de um espaço definido, o HTML entende que quando a div é maior ela deve reposicioná-la para o próximo bloco. Para exemplo, veja como funciona a técnica de Conteúdo responsivo em sites... 2/03/2015 às 14:25
-1

A questão está no tamanho da div.

Preste a atenção que a div azul tem 60px; E a rosa começa logo após a mesma com um numero menor. Em outras palavras o problema ai é o tamanho delas.

Para resolver esse problema você teria que fazer assim:

#c{height:60px;background:blue; float: right;}
5
  • sua solução não resolve o problema... eu sei que a div azul tem 60px, a questão é que mesmo que a div existente na esquerda seja maior, a seguinte teria que se ajustar na direita, é isso que eu quero como acontece com o site pinterest 6/02/2015 às 11:17
  • 2
    @LeandroLUK só que no pinterest ele usa um cara chamado masonry existe uma logica ali, não é só com o float que resolve o posicionamento.
    – Edmo
    6/02/2015 às 14:28
  • Não concordo com o negativo visto que ele resolveu. @LeandroLUK de uma olhada na forma de display flex. w3schools.com/cssref/css3_pr_flex-flow.asp e alguns exemplos w3schools.com/cssref/playit.asp?filename=playcss_flex-flow
    – heat
    13/02/2015 às 17:04
  • @Edmo, como os blocos dele tem um tamanho propocional a tela, então ele terá sempre o mesmo numero de colunas, desta forma é possivel alcançar o mesmo resultado do pinterest utilizando apenas divs. 27/02/2015 às 13:52
  • @TobyMosque boa! se for sempre o mesmo numero, você tem toda razão.
    – Edmo
    27/02/2015 às 14:12
-2

Tive esse problema e consegui resolver assim:

body {
  width: 1048px;
  height: auto;
  background: center, no-repeat;
  background-size: cover;
  background-color: #8E24AA;
}


/*COLUNA 1 E TEXTO*/

.column1 {
  width: 500px;
  height: 350px;
  background: #F3E5F5;
  float: left;
}


/*COLUNA E TEXTO 2*/

.column2 {
  width: 500px;
  height: 350px;
  background: #E1BEE7;
  float: right;
}


/*CONTEINER COM AS COLUNAS*/

.content {
  content: "column";
  display: table;
  clear: both;
}
<div class="content">
  <div class="column1 column">
    <h1>TESTING TESTING</h1>
  </div>
  <div class="column2 column">
    <h2>TESTING TESTING</h2>
  </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 .