Définir la largeur de l'élément à la largeur combinée des frères et sœurs ?

Question

Trois éléments se trouvent à l'intérieur d'un récipient de fluide dans la configuration suivante :

+-----------------+
| +-----+ +-----+ |
| |  A  | |  B  | |
| +-----+ +-----+ |
| +-------------+ |
| |      C      | |
| +-------------+ |
+-----------------+

La largeur des éléments A et B est de 50%. La largeur de l'élément C est de 100 %. Vous pouvez voir un exemple en direct aquí .

Les bords droits des rangées ne sont pas alignés lorsque la largeur du conteneur est un nombre impair de pixels, en raison de l'arrondi effectué lors du calcul de la largeur des éléments A et B. Vous pouvez observer les bords se désaligner et se réaligner lors du redimensionnement du cadre. L'effet est exacerbé lorsque la rangée supérieure contient beaucoup plus de deux éléments, par exemple dix .

Je voudrais plutôt que la largeur de l'élément C soit égale à la largeur réelle combinée des éléments A et B, plutôt qu'à la largeur combinée en pourcentage. Est-ce possible sans utiliser JavaScript ou recourir à un tableau ?

Answer 1

Une solution serait de faire flotter le premier élément à gauche, en lui donnant la largeur souhaitée. L'élément de droite ne flotterait pas et aurait une largeur par défaut, ce qui lui permettrait de s'étirer et de remplir l'espace laissé par l'élément de gauche. Voir une modification de votre exemple pour savoir comment cela pourrait fonctionner : http://jsfiddle.net/QDVeD/12/ . Les principes de base peuvent être résumés par :

#left {
  float: left;
  width: 50%;
  height: 50px;
}
#right {
  height: 50px;
}

Cette méthode ne serait pas aussi efficace que vous le souhaiteriez pour plus de deux éléments, cependant. Le dernier élément sera généralement légèrement plus long que les autres : http://jsfiddle.net/QDVeD/18/ .