Largeur relative impossible

Bonjour,

J'essaie de réaliser ceci :
[x][x]

En fait, [x] représente un <li>

J'ai un <div> qui contient 3 (ou plus) <li> (en inline-block), mais je veux que le dernier utilise toute la place restante du <div>.

Je ne peux pas définir la taille en dur en pixel, car la largeur du <div> et des premiers <li> peut varier.

J'ai essayé li:nth-last-child(1) { width:100%; } ainsi que des margin auto ou des max-width, mais cela décale le <li> vers le bas par manque de place.

Mon problème est facilement solvable avec une simple <table>, mais j'ai cru comprendre que c'était moins ... stylé !

Si une âme pouvait me donner une solution full-css

Camoulox

Bon plus sérieusement un code en ligne pourrait aidé ici (voir un screenshot du rendu recherché) parce que je n'ai vraiment RIEN compris à ce que tu cherches à faire.
Si tu dis qu'un tableau pourrait le régler, peut-être que le model tabulaire en CSS serait un début de réponse ?

Courage

OK, j'ai tenté de faire un rendu paint (pardon aux puristes)



Mon objectif est simple, je veux que le dernier <li> utilise tout l'espace restant (matérialisé par un trait bleu) de mon <div>.

(edit) je viens de faire un fiddle ça sera plus simple je pense!

merci
Modifié par Baud (19 Feb 2014 - 08:03)

Si ton nombre de <li> est dynamique, tu peut utiliser LESS mais je pense qu'il y a plus simple pour faire ce genre de chose.

J'aurais dit pareil que Stéphanie : avec display: table.

http://jsfiddle.net/74wTP/3/
Modifié par jb_gfx (19 Feb 2014 - 08:36)

Je me doutais que c'était tout bête !

C'est exactement ce que je voulais.

Je ne connais que display:block, inline et inline-block... Je vais me documenter !

Merci à vous tous pour votre compréhension !