Dynamische breedte container-eenheid met vaste hoogte en horizontale scroll?

Ik probeer een container-div te krijgen die horizontaal voorbij de viewport schuift. Zoiets als een filmstrip op volledig scherm met #a aan het begin en #c aan het einde. Zowel #a als #c zijn div.breedtes met vaste breedte en #b heeft een afbeelding met dynamische breedte. Het probleem dat ik ondervind, is om #container te krijgen om de breedte dynamisch te wijzigen in #b . Instellen van #container breedte naar automatisch of 100% gebruikt gewoon de breedte van de viewport.

Wat ik zoek:

[-  viewport width  -]
--#container--------------------------------------- 
|   --------------------------------------------  | 
|   | #a  |      #b...                    | #c |  |  
|   --------------------------------------------  |
--------------------------------------------------- 

Mijn markup:

#container {
    height:400px;
    }
#a {
    float:left;
    width:200px;
    height:400px;
    }
#b {
    float:left;
    width:auto;
    height:400px;
    }
#c {
    float:left;
    width:200px;
    height:400px;
    }


<div id="container">
    <div id="a">fixed width content</div>
    <div id="b">dynamic width content</div>
    <div id="c">fixed width content</div>
</div>

Edit: I can do this with a table, but would like to avoid that if possible.

Edit 2: Here's a working version using tables:

#container {
  height:400px;
  background:#fff;
  }
#a {
  width:200px;
  height:400px;
  background:#ccc;
  }
#b {
  height:400px;
  background:yellow;
  white-space: nowrap;
  }
#c {
  width:200px;
  height:400px;
  background:#ccc;
  }

<table cellpadding="0" cellspacing="0">
  <tr>
    <td id="a">
      a
    </td>
    <td id="b">
      
      
                           
    </td>
    <td id="c">
      b
    </td>       
  </tr>
</table>
4

1 antwoord

<div id="container">
  <div id="a">fixed width content</div>
  <div id="b">
    dynamic width content dynamic width content dynamic width content dynamic width content
  </div>
  <div id="c">fixed width content</div>
</div>

Hier is een goede CSS:

div {
  height: 400px;
}

#container {
  position: relative; /* needed for absolutely positioning #a and #c */
  padding: 0 200px; /* will offset for width of #a and #c; and center #b */
  border: green 3px dotted; /* just for the show */
  float: left; /* To dynamicaly change width according to children */
}

#a, #b {
  position: absolute; /* causes #a and #b to not respect padding of #container and also gives it its place */
  top: 0;
  width:200px;
  left: 0;
}

#c {
  right: 0;
}

Nice and shiny example: http://jsfiddle.net/KefJ2/

Als je meer dan één afbeelding nodig hebt, voeg je dit toe:

#b {
  white-space: nowrap; /* causes all direct child elements to be in one line */
}

Voorbeeld met meer afbeeldingen: http://jsfiddle.net/KefJ2/1/ Vanzelfsprekend zul je moeten spelen met tekst en afbeeldingen in #b , maar dat zou gemakkelijk genoeg moeten zijn :)

6
toegevoegd
Dat werkt niet. Het zorgt ervoor dat #a #b en #c verticaal worden gestapeld.
toegevoegd de auteur Jeff, de bron
Jeff I update antwoord. Ik had tot nu toe niet de tijd gehad om er naar te kijken.
toegevoegd de auteur Ivan Ivanić, de bron
Man, ik vond het zo leuk om hier aan te werken, te veel PHP de laatste tijd ... bedankt voor deze spannende vraag.
toegevoegd de auteur Ivan Ivanić, de bron