web-dev-qa-db-fra.com

Comment faire en sorte qu'un élément inline-block remplisse le reste de la ligne?

Est-ce possible d'utiliser CSS et deux balises DIV inline-block (ou autre) plutôt que d'utiliser un tableau?

La version de la table est la suivante (les bordures ont été ajoutées pour que vous puissiez la voir):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>

Il produit une colonne de gauche avec un FIXED WIDTH (pas un pourcentage de largeur) et une colonne de droite qui se développe pour remplir L'ESPACE RESTANT sur la ligne. Cela semble assez simple, non? De plus, comme rien n'est "flotté", la hauteur du conteneur parent est correctement agrandie pour englober la hauteur du contenu.

- BEGIN RANT -
J'ai déjà vu les implémentations de "solution claire" et de "saint graal" pour les dispositions multi-colonnes avec colonne latérale à largeur fixe, et elles sont nulles et compliquées. Ils inversent l'ordre des éléments, utilisent des largeurs de pourcentage ou des flottants, des marges négatives et la relation entre les attributs "gauche", "droit" et "marge" est complexe. De plus, les présentations sont sensibles aux sous-pixels, de sorte que l'ajout d'un seul pixel de bordures, de marges intérieures ou de marges brisera la présentation entière et enverra des colonnes entières à la ligne. Par exemple, les erreurs d'arrondi sont un problème même si vous essayez de faire quelque chose de simple, comme mettre 4 éléments sur une ligne, la largeur de chacun étant définie à 25%.
- END RANT -

J'ai essayé d'utiliser "inline-block" et "white-space: nowrap;", mais le problème est que je ne parviens pas à obtenir le deuxième élément qui remplisse l'espace restant sur la ligne. Définir la largeur à quelque chose comme "width: 100% - (LeftColumWidth) px" fonctionnera dans certains cas, mais l'exécution d'un calcul dans une propriété width n'est pas vraiment prise en charge.

csslayoutfixed-width
173
Triynko

Voir: http://jsfiddle.net/qx32C/36/

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 20px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}
<div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

Pourquoi ai-je remplacé margin-left: 100px par overflow: hidden sur .right?

EDIT: Voici deux miroirs pour le lien ci-dessus (mort):

168
thirtydot

Une solution moderne utilisant flexbox:

.container {
    display: flex;
}
.container > div {
    border: 1px solid black;
    height: 10px;
}

.left {
   width: 100px;
}

.right {
    width: 100%;
    background-color:#ddd;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

http://jsfiddle.net/m5Xz2/100/

54
Panu Horsmalahti

Compatible avec les ventilateurs modernes courants (IE 8+): http://jsfiddle.net/m5Xz2/3/

.lineContainer {
    display:table;
    border-collapse:collapse;
    width:100%;
}
.lineContainer div {
    display:table-cell;
    border:1px solid black;
    height:10px;
}
.left {
    width:100px;
}
 <div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
42
Frosty Z

Vous pouvez utiliser calc (100% - 100px) sur l'élément fluide, ainsi que display: inline-block pour les deux éléments.

Sachez qu’il ne doit y avoir aucun espace entre les balises, sinon vous devrez également tenir compte de cet espace dans votre calcul.

.left{
    display:inline-block;
    width:100px;
}
.right{
    display:inline-block;
    width:calc(100% - 100px);
}


<div class=“left”></div><div class=“right”></div>

Exemple rapide: http://jsfiddle.net/dw689mt4/1/

2
SuperIRis

J'ai utilisé la propriété flex-grow pour atteindre cet objectif. Vous devez définir display: flex pour le conteneur parent, puis vous devez définir flex-grow: 1 pour le bloc que vous souhaitez remplir, ou simplement flex: 1 comme tanius = mentionné dans les commentaires.

1
Владислав Ковеченков

Si vous ne pouvez pas utiliser overflow: hidden (parce que vous ne voulez pas overflow: hidden) ou si vous n'aimez pas les hacks/solutions de contournement CSS, vous pouvez utiliser JavaScript à la place. Notez que cela peut ne pas fonctionner aussi bien car c'est du JavaScript.

var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
  right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}
.lineContainer {
  width: 100% border: 1px solid #000;
  font-size: 0px;
  /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}

.lineContainer div {
  height: 10px;
  display: inline-block;
}

.left {
  width: 100px;
  background: red
}

.right {
  background: blue
}
<div class="lineContainer">
  <div class="left"></div>
  <div class="right"></div>
</div>

http://jsfiddle.net/ys2eogxm/

0
Nick Manning

Lorsque vous abandonnez les blocs en ligne

.post-container {
    border: 5px solid #333;
    overflow:auto;
}
.post-thumb {
    float: left;
    display:block;
    background:#ccc;
    width:200px;
    height:200px;
}
.post-content{
    display:block;
    overflow:hidden;
}

http://jsfiddle.net/RXrvZ/3731/

(from CSS Float: Flottant une image à gauche du texte )

0
Fanky