Maximale breedte gebruiken

Door Sander Z op 03-01-2014 17:24 gewijzigd op 03-01-2014 19:41

1.614 views

Ik ben even vastgelopen. Of het is heel simpel maar ik kom er ff niet op of het is lastig. Hopelijk kunnen jullie mij helpen.

Ik heb onderstaande HTML code (voorbeeld)


<div>
   <ul>
      <li>een</li>
      <li>twee</li>
      <li>drie</li>
   </ul>
</div>

Even aannemen dat de DIV 100% width heeft. Dus als ik de pagina breder maak, wordt de div dit ook.
Wat wil ik nu bereiken?
Alle 3 de <li> komen inline te staan. De 1e en de 3e krijgen een vaste breedte. Maar nu wil ik dat de 2e dan alle overblijvende ruimte pakt.
Maw:
De 1e staat dus compleet links in de DIV, de 3e staat uiterst rechts in de DIV. En de 2e wil ik dus vanaf de 1e naar de 3e hebben. Maar deze moet dus wel (responsive) meereageren als ik de pagina breder maak.

Het inline zetten en een vaste breedte voor de 1e en 3e <li> is geen probleem. Maar hoe kan ik de 2e <li> de volledige ruimte laten benutten?
De CSS ben ik nu aan het schrijven, dus alle opties zijn nog mogelijk.

Local Dev

03-01-2014 18:14

Ik ben geen css expert, maar kan je niet gewoon het volgende doen:

1e: 20%
2e: 60%
3e: 20%

Sander Z

03-01-2014 18:21

Die optie ken ik maar werkt niet voor wat ik wil. Op deze methode zullen de 1e en 3e ook met de breedte meegroeien. En dat wil ik juist niet. Alleen de 2e mag meegroeien.

- SanThe -

03-01-2014 19:36


<style>
#totaal
{
  margin       : 0px auto;
  background   : yellow;
}
#links
{
  float        : left;
  width        : 100px;
  background   : red;
}
#midden
{
  margin       : 0px 102px;
  background   : blue;
}
#rechts
{
  float        : right;
  width        : 100px;
  background   : red;
}
</style>

<div id="totaal">
  <div id="links">
    Links
  </div>
  <div id="rechts">
    Rechts
  </div>
  <div id="midden">
    Midden
  </div>
</div>

Sander Z

03-01-2014 19:45

Ga ik proberen!

Toevoeging op 04/01/2014 16:19:04:

Gelukt!
Lukt in 1e instantie niet, maar na goed kijken zag ik dat de volgorde qua opbouw aangepast was. ;)

Thanks!

Reageren

Inloggen om te reageren