Come posso mantenere i float CSS in una riga?

Voglio avere due elementi sulla stessa riga usando float: leftper l'elemento a sinistra.

Non ho problemi a raggiungerlo da solo. Il problema è che voglio che i due elementi rimangano sulla stessa riga anche quando si ridimensiona il browser in modo molto piccolo . Sai ... come è stato con i tavoli.

L'obiettivo è impedire che l'oggetto sulla destra venga avvolto, qualunque cosa accada .

Come dire al browser che utilizza CSS che preferirei allungare il contenitorediv piuttosto che avvolgerlo in modo che il float: right;div sia al di sotto del float: left; div?

quello che voglio:

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

Avvolgi i tuoi float <div>in un contenitore <div>che utilizza questo hack di larghezza minima tra browser:

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

Si potrebbe anche essere necessario impostare "troppo pieno", ma probabilmente non.

Questo funziona perché:

• La !importantdichiarazione, combinata con, fa min-widthsì che tutto rimanga sulla stessa linea in IE7 +
• IE6 non implementa min-width, ma ha un bug tale che width: 100pxsovrascrive la !importantdichiarazione, causando una larghezza del contenitore di 100px.

Un'altra opzione è, invece di fluttuare, per impostare la proprietà dello spazio vuoto ora su un div parent:

.parent {
     white-space: nowrap;
}

e azzera lo spazio bianco e usa un display a blocchi in linea in modo che i div rimangano sulla stessa linea ma puoi comunque dargli una larghezza.

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

Ecco un JSFiddle: https://jsfiddle.net/9g8ud31o/

Avvolgi i tuoi floater in un div con una larghezza minima maggiore della larghezza combinata + margine dei floater.

Non sono necessari hack o tabelle HTML.

Soluzione 1:

display: table-cell (non ampiamente supportato)

Soluzione 2:

tavoli

(Odio gli hack.)

Un'altra opzione: non fluttuare la colonna di destra; basta dargli un margine sinistro per spostarlo oltre il galleggiante. Avrai bisogno di un paio di hack per correggere IE6, ma questa è l'idea di base.

Sei sicuro che gli elementi a livello di blocco fluttuati siano la migliore soluzione a questo problema?

Spesso con difficoltà CSS nella mia esperienza si scopre che il motivo per cui non riesco a vedere un modo di fare ciò che voglio è che sono stato catturato in una visione a tunnel per quanto riguarda il mio markup (pensando "come posso fare questi elementi fanno questo ? ") piuttosto che tornare indietro e guardare a cosa esattamente devo raggiungere e magari rielaborare leggermente il mio HTML per facilitarlo.

consiglierei di usare le tabelle per questo problema. sto riscontrando un problema simile e fintanto che la tabella viene utilizzata solo per visualizzare alcuni dati e non per il layout della pagina principale, va bene.

Aggiungi questa linea al selettore di elementi fluttuanti

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

Impedirà di aggiungere imbottitura e bordi alla larghezza, quindi l'elemento rimane sempre in fila, anche se hai ad es. tre elementi con una larghezza del 33.33333%

Quando l'utente riduce le dimensioni della finestra in orizzontale e questo fa sì che i float si impilino verticalmente, rimuovili e sul secondo div (che era un float) usa margin-top: -123px (il tuo valore) e margin-left: 444px (il tuo valore) per posiziona i div come sono apparsi con i float. Se fatto in questo modo, quando la finestra si restringe, il div del lato destro rimane in posizione e scompare quando la pagina è troppo stretta per includerla. ... che (per me) è meglio che avere il div sul lato destro "salta" sotto il div sul lato sinistro quando la finestra del browser viene ristretta dall'utente.

Il modo in cui mi sono comportato è stato usare un po 'di jQuery. La ragione per cui l'ho fatto in questo modo era perché A e B erano larghezze percentuali.

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