Articles of css float

Alinhando dois divs lado a lado

Eu tenho um pequeno problema. Eu estou tentando alinhar duas divs lado a lado usando CSS, no entanto, eu gostaria que o centro div fosse posicionado horizontalmente central na página, eu consegui isso usando: #page-wrap { margin 0 auto; } Isso funcionou bem. A segunda div eu gostaria de posicionado no lado esquerdo da página […]

Como verticalmente alinhar elementos flutuantes de alturas desconhecidas?

Eu tenho um div externo (horizontalmente) centrado contendo dois elementos de largura desconhecida: … … Os dois carros alegóricos são alinhados por padrão e têm alturas variadas / desconhecidas e diferentes. Existe alguma maneira de torná-los centrados verticalmente? Eu finalmente fiz o div exterior display: table e as divs internas display: table-cell; vertical-align: middle; text-align: […]

Por que o CSS flutua não altera a largura do div seguinte?

Pelo que entendi float:left , ele irá empurrar o elemento subseqüente para a esquerda, em vez de uma nova linha. No exemplo a seguir, eu esperaria que o segundo div comece à direita do primeiro div, mas como você pode ver no jsfiddle abaixo, ele ainda ocupa toda a largura. O conteúdo, por outro lado, […]

Por que o overflow: hidden tem o efeito colateral inesperado de aumentar em altura para conter elementos flutuantes?

Esta questão é melhor explicada por este violino , com o seguinte HTML: CSS: .outer { width: 100px; border: solid 5px #000; } .inner-left { float: left; height: 200px; width: 50px; background: #f00; } .inner-right { float: right; height: 200px; width: 50px; background: #0f0; } Basicamente, estou me perguntando por que overflow: hidden faz com […]

Como flutuar 3 divs lado a lado usando CSS?

Eu sei como fazer 2 divs flutuar lado a lado, simplesmente flutuar um para a esquerda e o outro para a direita. Mas como fazer isso com 3 divs ou devo usar apenas tabelas para esse propósito?

Como faço para centralizar os elementos flutuantes?

Estou implementando paginação e precisa ser centralizado. O problema é que os links precisam ser exibidos como blocos, então eles precisam estar flutuando. Mas então, text-align: center; não funciona neles. Eu poderia consegui-lo dando o pad div de wrapper à esquerda, mas cada página terá um número diferente de páginas, então isso não funcionaria. Aqui […]

O que a regra do CSS “claro: ambos” faz?

O que a seguinte regra de CSS faz: .clear { clear: both; } E por que precisamos usá-lo?

Como criar uma visualização em grade / lado a lado?

Por exemplo, eu tenho um pouco de class .article, e quero ver essa class como exibição de grade. Então eu apliquei esse estilo: .article{ width:100px; height:100px; background:#333; float:left; margin:5px; } Esse estilo fará com que o artigo pareça azulejo / grade. Funciona bem com altura fixa. Mas se eu quiser definir a altura como automática […]