2 div allineati uno accanto all'altro, come fare a destra div div larghezza del 100%?

Question

mi chiedo che cosa il modo migliore per andare a fare questo è ...

Ho 3 div s:

• un div#container con width=100%; che contiene 2 interno div s

• a div#inner_left con width cambiando dinamicamente, ma non più largo di 200 px (conterrà un'immagine del prodotto)

• un div#inner_right quando la larghezza deve riempire il resto dello spazio nel contenitore (conterrà testo per descrivere il prodotto illustrato)

  #container { 
      width:100% 
  } 
  
  #inner_left { 
      display:inline-block: 
      max-width:200px; 
  } 
  
  #inner_right { 
      display:inline-block; 
      width:100%; 
  } 
  

Il problema è che il div#inner_right crea un'interruzione di riga e riempie l'intera larghezza. Come posso renderli allineati l'uno accanto all'altro, con la destra div che tiene conto della larghezza presa dalla sinistra div (che cambia dinamicamente?). Ho ottenuto questo per funzionare in altri modi, ma sto cercando una soluzione pulita ...

Qualsiasi aiuto per un noob CSS è molto apprezzato!

Answer 1

Dai un'occhiata alla "liquid layouts" si può descrivere ciò che si sta parlando.

Probabilmente stai cercando this one.

Nell'esempio, provare a impostare il display in linea. Tuttavia, tecnicamente non sarai in grado di utilizzare elementi a livello di blocco, quindi dai un'occhiata ai link che ho postato sopra. :)

Il problema con l'impostazione della larghezza al 100% se si utilizzano i float è che è considerato il 100% del contenitore, quindi non funzionerà in quanto il 100% include la larghezza del div sinistro.

Modifica: Here è l'esempio dell'altra risposta, l'ho modificato per includere l'html/css dal sito di esempio sopra per semplicità.

io includo anche qui sotto:

HTML

<div id="contentwrapper"> 
    <div id="contentcolumn"> 
     <div class="innertube"><b>Content Column: <em>Fluid</em></b></div> 
    </div> 
</div> 
<div id="leftcolumn"> 
    <div class="innertube"><b>Left Column: <em>200px</em></b></div> 
</div> 

CSS

#contentwrapper{ 
float: left; 
width: 100%; 
} 

#contentcolumn{ 
margin-left: 200px; /*Set left margin to LeftColumnWidth*/ 
} 

#leftcolumn{ 
float: left; 
width: 200px; /*Width of left column*/ 
margin-left: -100%; 
background: #C8FC98; 
} 

Answer 2

Uso galleggiante:

#container{ 
width:100% 
} 

#inner_left{ 
float:left; 
max-width:200px; 
} 

#inner_right{ 
float:left; 
width:100%; 
} 

Edit: hanno un letto un tale, è un bel po 'di guida: quirksmode

Answer 3

è necessario fornire la posizione: proprietà di stile assoluto sia al div di

Answer 4

Quindi, anche se volevo farlo solo con i CSS, ho finito per usare solo le tabelle ...

Answer 5

Non ho davvero visto una buona soluzione nelle risposte qui. Quindi condividerò il mio.

Il modo migliore per farlo è utilizzare l'opzione table-cell in CSS. Una cosa importante da aggiungere è una "larghezza minima" dell'elemento che ha una larghezza di pixel.

Esempio:

<div id="left"> 
    Left 
</div> 
<div id="right"> 
    right 
</div> 

CSS:

#left { 
    display: table-cell; 
    min-width: 160px; 
} 
#right { 
    display: table-cell; 
    width: 100%; 
    vertical-align: top; 
} 

Answer 6

Questo si basa sul 's @ W00 risposta. +1 amico.

La mia situazione era quando volevo mostrare un paio di icone accanto a un'etichetta. Io uso la classe del fluido per ciò che è il punto in cui entra il nowrap. Ecco perché le icone appaiono sulla stessa riga.

.sidebyside-left-fixed, .sidebyside-right-fixed 
{ 
    display: table-cell; 
    width: 100%; 
} 

.sidebyside-left-fluid , .sidebyside-right-fluid 
{ 
    display: table-cell; 
    vertical-align: top; 
    white-space: nowrap; 
} 

Answer 7

Questo può essere realizzato utilizzando Flex-Box, che è stato introdotto con CSS3 e secondo Can I use è cross-browser.

.container { 
 
    display: flex; 
 
} 
 

 
.left { 
 
    width: 100px; /* or leave it undefined */ 
 
} 
 

 
.right { 
 
    flex-grow: 1; 
 
} 
 

 
/* some styling */ 
 
.container {height: 90vh} 
 
.left {background: gray} 
 
.right {background: red}

<div class="container"> 
 

 
    <div class="left">100px</div> 
 
    <div class="right">Rest</div> 
 
    
 
</div>

Answer 8

Ecco un metodo semplice per raggiungere questo obiettivo, e questo è qualcosa che è molto spesso necessario. È anche testato per funzionare con tutti i browser, compresi quelli molto vecchi (fammi sapere se non lo fa).

Link ad un campione: https://jsfiddle.net/collinsethans/jdgduw6a/

Ecco la parte HTML:

<div class="wrapper"> 
    <div class="left"> 
     Left Box 
    </div> 

    <div class="right"> 
     Right Box 
    </div> 

</div> 

E lo SCSS corrispondente:

.wrapper { 
    position: relative; 
} 

$left_width: 200px; 
.left { 
    position: absolute; 
    left: 0px; 
    width: $left_width; 
} 
.right { 
    margin-left: $left_width; 
} 

Se non si utilizza alcun preprocessore CSS, quindi sostituire il $ left_width con il tuo valore (200px qui).

Credito: si basa su http://htmldog.com/examples/pagelayout2/. Ci sono molti altri utili lì.