Centrare il centro di tre div e posizionare gli altri due rispetto a quello centrale

Question

Scusate se il titolo è confuso. Fondamentalmente, sto lavorando su un tema tumblr in cui ho bisogno di tre div adiacenti avvolti in un contenitore a larghezza fissa. Nessuno dei loro contenuti è fisso, quindi hanno tutti una larghezza variabile. Il div medio dovrebbe sempre essere centrato sul contenitore, mentre i div a sinistra e a destra saranno sempre "toccando" il div medio, e, quindi, spostati mentre la larghezza del div centrale cambia (le immagini di sinistra e di destra possono essere , quindi l'allineamento del testo non funziona sempre). Inoltre, potrebbe anche essere necessario nascondere la sinistra, la destra o entrambe le immersioni sinistra e destra.

Ecco un'immagine concettuale:

posso ottenere questo utilizzando flexboxes facilmente (JFiddle), ma flex only has 86% global support.

Questo è il più vicino ho potuto ottenere senza usare flexboxes, ma non riesco a ottenere che div centrale (con testo) centrato al titolo div, pur conservando le posizioni relative delle due immagini su entrambi i lati: JFiddle

* { 
    height: 100%; 
    position: relative; 
} 
body { 
    height: 200px; 
} 
/* just to get rid of scrollbar */ 
p { 
    margin: 0; 
} 
.title { 
    background: #aaa; 
    height: 22px; 
    width: 450px; 
    /* for example */ 
    margin: 0 auto; 
} 
.container { 
    background: #abc; 
    float: left; 
} 
.lr { 
    transform: translate(0, -100%); 
} 
.left { 
    background: green; 
    float: left; 
} 
.left img { 
    transform: translate(-100%); 
} 
.center { 
    background: red; 
    display: inline-block; 
    z-index: 2; 
} 
.right { 
    background: blue; 
    float: right; 
} 
.right img { 
    transform: translate(100%); 
} 
.left img, .right img { 
    height: 100%; 
} 

<div class="title"> 
    <div class="container"> 
     <div class="center">CENTERCENTERCENTERCEN</div> 
     <div class="lr"> 
      <div class="left"> 
       <img src="http://i.imgur.com/7bvErJN.jpg" /> 
      </div> 
      <div class="right"> 
       <img src="http://i.imgur.com/q8Mq0YZ.jpg" /> 
      </div> 
     </div> 
    </div> 
</div> 

altri hanno scritto cercando di visualizzare il titolo come un tavolo, ma che richiederebbe centrare la cellula centrale per tutta la fila, e avendo le celle a sinistra ea destra prendere il resto dello spazio, e Non sono sicuro che tu possa farlo quando le loro larghezze non sono corrette.

Qualcuno sa di altre soluzioni?

Answer 1

Se è possibile modificare il codice HTML, allora diffusa questa:

• Spostare prima gli elementi a destra e sinistra all'interno del centro:

  <div class="center"> 
      CENTERCENTERCENTERCEN 
      <div class="left"> 
       testtest<img src="http://i.imgur.com/7bvErJN.jpg" /> 
      </div> 
      <div class="right"> 
       <img src="http://i.imgur.com/q8Mq0YZ.jpg" /> 
      </div> 
  </div> 
  

• Poi sul CSS:

  /*Keep the center container on the middle*/ 
  .title { 
      text-align:center; 
  } 
  .center { 
      position:relative; 
      display:inline-block; 
  } 
  
  /*Position elements based on the relative center parent*/ 
  .left { 
      position:absolute; 
      top:0;left:0; 
      transform:translateX(-100%) 
  } 
  .right { 
      position:absolute; 
      top:0;right:0; 
      transform:translateX(100%) 
  } 
  

Scegli questa DemoFiddle

Answer 2

aggiornata per mostrare OP Aggiornamento

Non c'è bisogno di flex qui, perché non basta usare le percentuali? Fai galleggiare tutti i contenitori e inserisci le percentuali in relazione alle dimensioni che desideri. (50% per il centro, 25% per i contenitori esterni).

È possibile utilizzare i contenitori esterni come wrapper in modo da poter ancora utilizzare un bordo sui contenitori interni senza compromettere il dimensionamento. Quindi basta far galleggiare i contenitori interni all'interno di dei contenitori esterni (se ciò ha senso). L'esempio seguente fa semplicemente galleggiare i tag interni p nei contenitori esterni.

Questo fa sì che abbracci sempre il contenitore interno, mantenendo le dimensioni relative e mantenendo il centro al centro.

Esempio di seguito:

Fiddle

HTML

<div class="container"> 
    <div class="flexa"> 
    <div class="left"> 
     <p>leftleft</p> 
    </div> 
    <div class="center"><p>CENTERCENTdsfdfdERCENTsdfdfsfERCEN</p></div> 
    <div class="right"> 
     <p>ri</p> 
    </div> 
    </div> 
    <div class="bottom">BOTTOMOMOM</div> 
</div> 

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
div { 
    background: #aaaaaa; 
    overflow: hidden; 
} 
p{ 
    border: 1px solid black; 
} 
.container { 
    width: 500px; 
    /* for example */ 
    margin: 0 auto; 
} 
.right p{ /* This is what makes it work. This could be a div with class of inner or something like that. */ 
    float:left; 
} 
.left p{ 
    float:right; 
} 
.flexa div{ 
    float:left; 
} 
.left { 
    width:25%; 
} 
.center { 
    width: 50%; 
} 
.right { 
    width:25%; 
} 
.bottom { 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 

Answer 3

Utilizzando position: absolute dovrebbe aiutare in questo .

ho cambiato il codice HTML di seguito:

<div class="title"> 
    <div class="container"> 
     <img class="left" src="http://i.imgur.com/7bvErJN.jpg" /> 
     <div class="center">CENTERCENTERCENTERCEN</div> 
     <img class="right" src="http://i.imgur.com/q8Mq0YZ.jpg" /> 
    </div> 
</div> 

CSS

.title { 
    background: #aaa; 
    height: 22px; 
    width: 450px; 
    /* for example */ 
    margin: 0 auto; 
    text-align: center; 
} 
.container { 
    background: #abc; 
    display: inline-block; 
    margin: 0 auto; 
    position: relative; 
    text-align: left; 
} 
.center { 
    background: red; 
} 
.left, .right { 
    position: absolute; 
    top: 0px; 
} 
.left { 
    right: 100%; 
} 
.right { 
    left: 100%; 
} 

Working Fiddle