Come posso mantenere i float CSS in una riga?

Question

Voglio avere due elementi sulla stessa riga usando float: left per 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 ridimensioni il browser molto piccolo . Sai ... come è stato con i tavoli.

L'obiettivo è impedire che l'elemento sulla destra venga spostato qualunque cosa .

Come dire al browser che utilizza CSS che preferirei allungare il contenuto div piuttosto che avvolgerlo in modo che il div float: right; sia inferiore a float: left; <=>?

quello che voglio:

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

Answer 1

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

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

È possibile che sia necessario anche impostare " overflow " ma probabilmente no.

Questo funziona perché:

• La min-width dichiarazione, combinata con width: 100px fa sì che tutto rimanga sulla stessa linea in IE7 +
• IE6 non implementa <=>, ma ha un bug tale che <=> sovrascrive la dichiarazione <=>, facendo sì che la larghezza del contenitore sia 100px.

Answer 2

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/

Answer 3

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.

Answer 4

Soluzione 1:

display: table-cell (non ampiamente supportato)

Soluzione 2:

tavoli

(Odio gli hack.)

Answer 5

Un'altra opzione: non spostare 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.

Answer 6

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 questo ? ") piuttosto che tornare indietro e guardare a cosa esattamente devo raggiungere e magari rielaborare il mio HTML leggermente per facilitare quello.

Answer 7

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.

Answer 8

Aggiungi questa linea al selettore di elementi fluttuati

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

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

Answer 9

Quando l'utente riduce le dimensioni della finestra in orizzontale e questo fa impilare i float in verticale, rimuovi i float e sul secondo div (che era un float) usa margin-top: -123px (il tuo valore) e margin-left: 444px (il tuo valore) per posizionare i div come apparivano 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; saltare " sotto il div sinistro quando la finestra del browser è ristretta dall'utente.

Answer 10

Il modo in cui mi sono comportato è stato usare jQuery. La ragione per cui l'ho fatto in questo modo è 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());
});