Como faço para manter carros alegóricos CSS em uma linha?

Question

Eu quero ter dois itens na mesma linha usando float: left para o item à esquerda.

Eu não tenho problemas conseguir isso sozinho. O problema é, eu quero os dois itens para estadia na mesma linha , mesmo quando você redimensionar o navegador muito pequena . Você sabe ... como como era com tabelas.

O objetivo é manter o item sobre o direito de embrulho não importa o que .

Como eu digo o navegador usando CSS que eu preferiria esticar a contendo div do envoltório lo assim que o do div float: right; está abaixo do float: left; div?

o que eu quero:

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

Answer 1

Envolva seu <div>s flutuando em um <div> recipiente que utiliza este cross-browser corte min-width:

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

Você pode também precisa definir "overflow", mas provavelmente não.

Isso funciona porque:

• A declaração !important, combinado com min-width causa de tudo para ficar na mesma linha no IE7 +
• IE6 não implementa min-width, mas tem um bug de tal forma que width: 100px substitui a declaração !important, fazendo com que a largura do recipiente para ser 100px.

Answer 2

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

.parent {
     white-space: nowrap;
}

e redefinir o espaço em branco e usar um display inline-block para que os divs permanecer na mesma linha, mas você ainda pode dar-lhe uma largura.

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

Aqui está uma jsFiddle: https://jsfiddle.net/9g8ud31o/

Answer 3

Envolva seus flutuadores em uma div com uma maior min de largura do que a largura + margem combinada dos flutuadores.

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

Answer 4

Solução 1:

display: table-cell (não amplamente suportado)

Solução 2:

tabelas

(eu odeio hacks.)

Answer 5

Outra opção: não flutuam sua coluna da direita; apenas dar-lhe uma margem esquerda para movê-lo para além do flutuador. Você vai precisar de um corte ou dois para corrigir IE6, mas essa é a idéia básica.

Answer 6

Você tem certeza que elementos nível de bloco flutuou são a melhor solução para este problema?

Muitas vezes, com dificuldades CSS em minha experiência verifica-se que a razão pela qual eu não posso ver uma maneira de fazer a coisa que eu quero é que eu fui pego em um túnel-visão com relação a minha marcação (pensando "como pode Eu faço estes elementos fazer este ?") ao invés de ir para trás e olhar para o que exatamente é que eu preciso para alcançar e talvez refazendo meu html ligeiramente para facilitar isso.

Answer 7

eu recomendo o uso de tabelas para este problema. eu estou tendo um problema semelhante e enquanto a tabela é apenas utilizado para exibir alguns dados e não para a página principal do layout é bom.

Answer 8

Adicione esta linha ao seu seletor de elemento flutuado

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

Ele irá impedir preenchimento e fronteiras para ser adicionado a largura, de modo elemento sempre ficar na fila, mesmo se você tiver por exemplo. três elementos com largura de 33,33333%

Answer 9

Quando o usuário reduz o tamanho da janela horizontalmente e isso faz com flutua para empilhar verticalmente, remova os carros alegóricos e na segunda div (que era um float) uso margin-top: -123px (seu valor) e deixou-margin: 444px (o seu valor) para posicionar os divs como apareceram com flutuadores. Quando feito desta forma, quando os estreitos de janela, a div estadias do lado direito no lugar e desaparece quando a página é muito estreita para incluí-lo. ... que (para mim) é melhor do que ter o lado direito div "salto" para baixo abaixo da div do lado esquerdo quando a janela do navegador é estreitada pelo usuário.

Answer 10

A maneira que eu tenho em torno deste era usar alguns jQuery. A razão que eu fiz isto deste modo foi porque A e B foram por cento larguras.

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());
});