Como mantenho flutuadores CSS em uma linha?


216

Eu quero ter dois itens na mesma linha usando float: lefto item à esquerda.

Não tenho problemas para conseguir isso sozinho. O problema é que eu quero que os dois itens permaneçam na mesma linha, mesmo quando você redimensionar o navegador muito pequeno . Você sabe ... como era com as mesas.

O objetivo é manter o item à direita do invólucro, não importa o quê .

Como dizer ao navegador usando CSS que preferiria esticar o conteúdo dodiv que envolvê-lo para que a float: right;div esteja abaixo do float: left; div?

o que eu quero:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

54
Como seria legal se o StackOverlow adicionasse um pequeno widget de desenho para que pudéssemos fazer esses diagramas com o mouse? Pode ser mais apropriado para sites SE orientados ao design ... mas seria incrível mesmo assim.
JoeCool

5
@JoeCool O site do UX SE já tem uma ferramenta para criar modelos nele. meta.ux.stackexchange.com/questions/1291/…
frank hadder

Respostas:


77

Embrulhe seus <div>s flutuantes em um contêiner <div>que use este hack de largura mínima no navegador:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

Você também pode precisar definir "estouro", mas provavelmente não.

Isso funciona porque:

  • A !importantdeclaração, combinada com, min-widthfaz com que tudo permaneça na mesma linha no IE7 +
  • O IE6 não implementa min-width, mas possui um bug que width: 100pxsubstitui a !importantdeclaração, fazendo com que a largura do contêiner seja 100px.

Isso funciona muito bem para dois carros alegóricos, mas não para três. Pode trabalhar para três ??
usar o seguinte código

15
O único problema é que força uma largura mínima fixa.
23812 Matt Montag

6
Esta não é uma solução, é apenas uma largura mínima, quando seu conteúdo fica muito pequeno (veja a pergunta), então abaixo dos 100px você tem o mesmo problema. Especialmente com células da tabela, isso permanece um problema.
21413 Sanne

Absolutamente chocante - resolvi meu problema instantaneamente. Eu tenho discutido com esse problema em um layout simples de inicialização de duas colunas com mais hacks do que posso nomear, mas isso funcionou perfeitamente. Obrigado pela explicação de por que esse trabalho - coisas fascinantes, o dom é.
Nocarrier 23/08/14

Isso pode funcionar com divs, mas eu apenas testei com ul / li e não funciona :(
AsGoodAsItGets

132

Outra opção é, em vez de flutuar, definir a propriedade de espaço em branco nowrap como uma div pai:

.parent {
     white-space: nowrap;
}

e redefina o espaço em branco e use uma exibição de bloco embutido para que os divs permaneçam na mesma linha, mas você ainda pode dar uma largura.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

Aqui está um JSFiddle: https://jsfiddle.net/9g8ud31o/


4
Definitivamente a melhor solução que eu já vi. Funciona para o meu caso de uso, mas me pergunto como é suportado. Felizmente, o uso de carros alegóricos para TUDO está lentamente se tornando uma coisa do passado.
Ryan Ore

1
Você pode explicar como isso funciona? ou algum link pelo menos?
Anirudhan J

4
@AnirudhanJ Não é muito difícil. O bloco embutido faz com que os elementos fluam normalmente com o texto embutido (mas mantém algumas das habilidades de preenchimento / margem do bloco), e você literalmente diz ao CSS para não envolver o texto com a opção espaço em branco: nowrap (aplicando "normal" "de novo para a criança, para evitar que ela se propague em tudo)"
Brian Brian

Como você faz com que a div à direita flutue à direita da tela? Isso coloca dois blocos em linha um ao lado do outro que não quebram a linha.
AddMitt # 15/16

você também pode usar o espaçamento entre letras: -3px (ou qualquer valor que funcione para você) para remover o espaço entre os elementos do bloco embutido. PS: melhor que a resposta aceita ;
Claudiu

15

Enrole suas moscas volantes em uma div com uma largura mínima maior que a largura combinada + margem das moscas volantes.

Não são necessários hacks ou tabelas HTML.


10

Solução 1:

display: célula de tabela (não é amplamente suportado)

Solução 2:

mesas

(Eu odeio hacks.)


8

Outra opção: não flutue sua coluna da direita; apenas dê uma margem esquerda para movê-lo além do flutuador. Você precisará de um hack ou dois para corrigir o IE6, mas essa é a ideia básica.


4

Você tem certeza de que os elementos no nível do bloco flutuante são a melhor solução para esse problema?

Muitas vezes, com dificuldades de CSS na minha experiência, verifica-se que a razão pela qual não vejo uma maneira de fazer o que quero é que fui pego em uma visão de túnel em relação à minha marcação (pensando "como posso fazer isso?" elementos fazem isso ? ") ao invés de voltar e olhar exatamente o que é preciso alcançar e talvez refazer meu html um pouco para facilitar isso.


funciona bem para quase tudo e o layout existente é baseado nele, estou apenas tentando corrigir um problema com a quebra do layout quando você aumenta muito o tamanho do texto OU redimensiona a janela do navegador com menos de 700 px de largura
Jiaaro

2

Eu recomendaria o uso de tabelas para esse problema. Estou tendo um problema semelhante e, desde que a tabela seja usada apenas para exibir alguns dados e não para o layout da página principal, está correto.


2

Adicione esta linha ao seu seletor de elemento flutuante

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

Isso impedirá que o preenchimento e as bordas sejam adicionados à largura, para que o elemento fique sempre na linha, mesmo que você tenha, por exemplo. três elementos com largura de 33.33333%


0

Quando o usuário reduz o tamanho da janela horizontalmente e isso faz com que os flutuadores sejam empilhados verticalmente, remova os flutuadores e, na segunda div (que era flutuante), use margin-top: -123px (seu valor) e margin-left: 444px (seu valor) para posicione os divs como eles apareceram com flutuadores. Quando isso é feito, quando a janela se estreita, a div do lado direito permanece no lugar e desaparece quando a página é muito estreita para incluí-la. ... o que (para mim) é melhor do que fazer com que a div do lado direito "salte" abaixo da div do lado esquerdo quando a janela do navegador é reduzida pelo usuário.


-3

A maneira como resolvi isso foi usar jQuery. O motivo pelo qual fiz dessa maneira foi porque A e B tinham larguras percentuais.

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});

1
Uma estrutura para CSS? Eu tenho que -jquery para TODAS as pesquisas de JavaScript e, devido a um completo e absoluto desprezo pela qualidade, temos que começar a procurar explicitamente também por CSS com -jquery? Faça certo ou não faça nada.
John
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.