Come fare un elemento inline-block riempire il resto della linea?

È ansible ciò usando CSS e due tag DIV inline-block (o qualsiasi altro) invece di usare una tabella?

La versione della tabella è questa (i bordi sono stati aggiunti in modo che tu possa vederlo):

    

Produce una colonna sinistra con una LARGHEZZA FISSA (non una larghezza percentuale) e una colonna destra che si espande per riempire LO SPAZIO RIMANENTE sulla linea. Sembra piuttosto semplice, giusto? Inoltre, poiché nulla è “fluttuato”, l’altezza del contenitore genitore si espande correttamente per racchiudere l’altezza del contenuto.

– INIZIA RANT–
Ho visto le implementazioni “clear fix” e “holy grail” per layout a più colonne con colonna laterale a larghezza fissa, e fanno schifo e sono complicate. Esse invertono l’ordine degli elementi, usano larghezze percentuali, o usano float, margini negativi e la relazione tra gli attributi “left”, “right” e “margin” è complessa. Inoltre, i layout sono sensibili ai pixel secondari in modo che l’aggiunta di un singolo pixel di bordi, spaziature o margini interromperà l’intero layout e invierà intere colonne alla riga successiva. Ad esempio, gli errori di arrotondamento sono un problema anche se si tenta di fare qualcosa di semplice, come mettere 4 elementi su una linea, con la larghezza di ognuno impostata al 25%.
–END RANT–

Ho provato a usare “inline-block” e “white-space: nowrap;”, ma il problema è che non riesco a ottenere il secondo elemento per riempire lo spazio rimanente sulla linea. Impostando la larghezza su qualcosa come “width: 100% – (LeftColumWidth) px” funzionerà in alcuni casi, ma l’esecuzione di un calcolo in una proprietà width non è realmente supportata.

    Vedi: http://jsfiddle.net/qx32C/36/

     .lineContainer { overflow: hidden; /* clear the float */ border: 1px solid #000 } .lineContainer div { height: 20px } .left { width: 100px; float: left; border-right: 1px solid #000 } .right { overflow: hidden; background: #ccc } 
     
    left
    right

    Una soluzione moderna con Flexbox:

     .container { display: flex; } .container > div { border: 1px solid black; height: 10px; } .left { width: 100px; } .right { width: 100%; background-color:#ddd; } 
     

    Compatibile con i brower moderni (IE 8+): http://jsfiddle.net/m5Xz2/3/

     .lineContainer { display:table; border-collapse:collapse; width:100%; } .lineContainer div { display:table-cell; border:1px solid black; height:10px; } .left { width:100px; } 
      
    left
    right

    Se non puoi utilizzare l’ overflow: hidden (perché non vuoi overflow: hidden ) o se non ti piacciono gli hack o i workaround CSS, puoi usare JavaScript invece. Si noti che potrebbe non funzionare anche perché è JavaScript.

     var parent = document.getElementsByClassName("lineContainer")[0]; var left = document.getElementsByClassName("left")[0]; var right = document.getElementsByClassName("right")[0]; right.style.width = (parent.offsetWidth - left.offsetWidth) + "px"; window.onresize = function() { right.style.width = (parent.offsetWidth - left.offsetWidth) + "px"; } 
     .lineContainer { width: 100% border: 1px solid #000; font-size: 0px; /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */ } .lineContainer div { height: 10px; display: inline-block; } .left { width: 100px; background: red } .right { background: blue } 
     

    Quando rinunci ai blocchi in linea

     .post-container { border: 5px solid #333; overflow:auto; } .post-thumb { float: left; display:block; background:#ccc; width:200px; height:200px; } .post-content{ display:block; overflow:hidden; } 

    http://jsfiddle.net/RXrvZ/3731/

    (da CSS Float: floating un’immagine a sinistra del testo )

    È ansible utilizzare calc (100% – 100 px) sull’elemento fluido, insieme al display: blocco in linea per entrambi gli elementi.

    Siate consapevoli che non ci dovrebbe essere spazio tra i tag, altrimenti dovrete considerare anche quello spazio nel vostro calc.

     .left{ display:inline-block; width:100px; } .right{ display:inline-block; width:calc(100% - 100px); } 

    Esempio rapido: http://jsfiddle.net/dw689mt4/1/