Minhas perguntas)
Algum desses métodos é preferido por um web designer profissional?
Algum desses métodos é preferido por um navegador da web ao desenhar o site?
Isso tudo é apenas preferência pessoal?
Faltam outras técnicas?
Nota: As perguntas acima são referentes ao design de um layout de várias colunas
flutuar: esquerda;
Esse é o método que eu sempre uso ao criar layouts de coluna e parece funcionar muito bem. O pai ou a mãe se desmoronam, então você só precisa se lembrar disso clear:both;
depois. Outro golpe que acabei de encontrar foi a incapacidade de alinhar o texto verticalmente.
display: embutido;
Isso parece corrigir o problema do pai em colapso, mas adiciona espaço em branco.
Remover espaço em branco do html parece ser a solução mais fácil para esse problema, mas não é desejado se você for realmente exigente com o html.
display: bloco embutido;
Parece se comportar exatamente como display:inline;
.
display: célula de tabela;
Funciona perfeito.
Meus pensamentos:
Tenho certeza de que estou perdendo uma tonelada de coisas, como certas exceções que quebram o layout, mas display:table-cell;
parece funcionar melhor e acho que vou começar a substituir, float:left;
pois sempre pareço atrapalhar clear:both;
. Eu li muitos artigos e blogs sobre isso na web, mas nenhum deles me fornece uma resposta definitiva sobre o que devo usar ao criar meu site.
display: inline
propriedade e descobri que ela não cuida do preenchimento dos elementos filho corretamente. Mas se eu usar,display: inline-block
isso será resolvido automaticamente. Por favor, consulte o link - codepen.io/prashdeep/pen/rVOyvd Por favor, deixe-me saber suas entradas no mesmoRespostas:
Das opções que você perguntou sobre:
float:left;
Não gosto de carros alegóricos devido à necessidade de ter marcações adicionais para limpá-los. Para mim, todo o
float
conceito foi mal projetado nas especificações do CSS. No entanto, nada que possamos fazer sobre isso agora. Mas o importante é que funciona e funciona em todos os navegadores (até no IE6 / 7), portanto, use-o se quiser.A marcação adicional para limpeza pode não ser necessária se você usar o
:after
seletor para limpar os carros alegóricos, mas essa não é uma opção se você deseja oferecer suporte ao IE6 ou IE7.display:inline;
Isso não deve ser usado para o layout, com exceção do IE6 / 7, onde
display:inline; zoom:1
há um hack para o suporte quebradoinline-block
.display:inline-block;
Esta é a minha opção favorita. Funciona bem e consistentemente em todos os navegadores, com uma ressalva para o IE6 / 7, que o suporta para alguns elementos. Mas veja acima a solução hacky para solucionar isso.
A outra grande ressalva
inline-block
é que, devido ao aspecto embutido, os espaços em branco entre os elementos são tratados da mesma forma que os espaços em branco entre as palavras do texto, para que você possa ver as diferenças entre os elementos. Existem soluções alternativas para isso, mas nenhuma delas é ideal. (o melhor é simplesmente não ter espaços entre os elementos)display:table-cell;
Outro onde você terá problemas com a compatibilidade do navegador. IEs mais antigos não funcionarão com isso. Mas, mesmo para outros navegadores, vale a pena notar que ele
table-cell
foi projetado para ser usado no contexto de estar dentro de elementos denominados comotable
etable-row
; o usotable-cell
isolado não é a maneira pretendida de fazer isso; portanto, você pode experimentar diferentes navegadores tratando-o de maneira diferente.Outras técnicas que você pode ter perdido? Sim.
Como você diz que isso é para um layout de várias colunas, há um recurso de Colunas CSS que você pode querer conhecer. No entanto, não é o recurso mais suportado (não suportado pelo IE, nem no IE9, e um prefixo de fornecedor exigido por todos os outros navegadores); portanto, você pode não querer usá-lo. Mas é outra opção, e você perguntou.
Há também o recurso CSS FlexBox, cujo objetivo é permitir que o texto flua de uma caixa para outra. É um recurso interessante que permitirá alguns layouts complexos, mas isso ainda está em desenvolvimento - consulte http://html5please.com/#flexbox
Espero que ajude.
fonte
inline-block
porque é feito exatamente para esses casos.em
s. Isso significa que pode não ser uma solução adequada para todos os casos. Você também pode gostar de ver esta resposta que publiquei separadamente, que aborda esse ponto e outras opções para lidar com a questão do espaço em branco.Normalmente, uso
float: left;
e adicionooverflow: auto;
para resolver o problema do pai em colapso (por que isso funciona,overflow: auto
o pai será expandido em vez de adicionar barras de rolagem, se você não fornecer uma altura explícita, tambémoverflow: hidden
funciona). A maioria das necessidades de alinhamento vertical que eu tinha são de uma linha de texto nas barras de menus , que podem ser resolvidas usando aline-height
propriedade Se eu realmente precisar alinhar verticalmente um elemento de bloco, definiria uma altura explícita no pai e no item alinhado verticalmente, posição absoluta, 50% superior e margem negativa.O motivo pelo qual não uso
display: table-cell
é o modo como ele transborda quando você tem mais itens do que a largura do site pode suportar. A célula de tabela forçará o usuário a rolar horizontalmente, enquanto os flutuadores envolverão o menu de transbordamento, tornando-o ainda utilizável sem a necessidade de rolagem horizontal.A melhor coisa sobre float: left e overflow: auto é que ele funciona de volta ao IE6 sem hacks, provavelmente ainda mais.
fonte
Eu diria que depende do que você precisa:
Se você precisar apenas para obter o layout de 3 colunas, sugiro fazê-lo
float
.Se você precisar dele para o menu, poderá usar
inline-block
. Para o problema de espaço em branco, você pode usar alguns truques, conforme descrito por Chris Coyier aqui http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .Se você precisar fazer uma opção de múltipla escolha, que a largura precisa se espalhar uniformemente dentro de uma caixa especificada, prefiro
display: table
. Isso não funcionará corretamente em alguns navegadores, portanto, depende do suporte do seu navegador.Por fim, qual pode ser o melhor método está usando
flexbox
. As especificações para isso mudaram algumas vezes, por isso ainda não é estável. Mas, uma vez finalizado, esse será o melhor método que eu acho.fonte
Eu prefiro o bloco embutido, embora o float também seja útil. A célula da tabela não é renderizada corretamente pelos IEs antigos (nem o bloco embutido, mas há o
zoom: 1; *display: inline
hack que eu uso com frequência). Se você tiver filhos com uma altura menor que a dos pais, os flutuadores os levarão ao topo, enquanto o bloqueio embutido às vezes estragará.Na maioria das vezes, o navegador interpreta tudo corretamente, a menos que, é claro, seja o IE. Você sempre precisa verificar se o IE não é ruim - por exemplo, o conceito de célula de tabela.
Em toda a realidade, sim, tudo se resume à preferência pessoal.
Uma técnica que você pode usar para se livrar do espaço em branco seria definir
font-size
0 para o pai e depois dar asfont-size
costas para os filhos, embora isso seja um aborrecimento e nojento.fonte
Apenas para o registro, para adicionar à resposta de Spudley, também há a possibilidade de usar
position: absolute
e margens se você souber as larguras da coluna.Para mim, o principal problema ao escolher um método é se você precisa das colunas para preencher toda a altura (alturas iguais), onde a célula da tabela é o método mais fácil (se você não se importa muito com navegadores antigos).
fonte
Eu prefiro
inline-block
, masfloat
ainda assim , é uma maneira útil de reunir elemenets HTML, especialmente quando temos elementos nos quais um deve ficar à esquerda e outro à direita, flutuar trabalhando melhor ao escrever menos linhas, enquanto o bloco embutido funciona bem em muitos outros casos .fonte