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

Question

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

Demandé el 4 de Avril, 2011: Quand la question a-t-elle été
26125 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Une telle chose est-elle possible en utilisant CSS et deux balises DIV inline-block (ou autre) au lieu d'utiliser un tableau ?

La version tableau 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 LARGEUR FIXE (et non un pourcentage de largeur), et une colonne de droite qui s'étend pour remplir L'ESPACE RESTANT sur la ligne. Cela semble assez simple, n'est-ce pas ? De plus, comme rien n'est "flottant", la hauteur du conteneur parent s'étend correctement pour englober la hauteur du contenu.

--BEGIN RANT--
J'ai vu les implémentations "clear fix" et "holy grail" pour les mises en page multi-colonnes avec des colonnes latérales de largeur fixe, et elles sont nulles et compliquées. Elles inversent l'ordre des éléments, utilisent des largeurs en pourcentage, des marges flottantes ou négatives, et la relation entre les attributs "left", "right" et "margin" est complexe. En outre, les mises en page sont sensibles aux sous-pixels, de sorte que l'ajout d'un seul pixel de bordures, de rembourrage ou de marges brisera toute la mise en page et enverra des colonnes entières à la ligne suivante. Par exemple, les erreurs d'arrondi sont un problème même si vous essayez de faire quelque chose de simple, comme placer 4 éléments sur une ligne, la largeur de chacun étant fixée à 25 %.
--END RANT--

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

Demandé el 4 de Avril, 2011 par Triynko

1 votes

Je ne pense pas qu'il y ait une façon saine de procéder, si ce n'est en transformant cela en une display: table-* qui fonctionnera, mais qui n'est pas vraiment "plus sémantique" non plus (c'est un cas terrible de div soup) et rompt la compatibilité avec IE6. Personnellement, je m'en tiendrais à la version <table> La Commission a donc décidé de mettre en place un système d'alerte précoce, à moins que quelqu'un ne parvienne à trouver une idée géniale et simple qui fonctionne sans que cela soit nécessaire.

Commenté el 4 de Avril, 2011 par Pekka 웃

53 votes

Je n'arrête pas de tomber sur ces arguments "évitez les tableaux" datant de l'aube de l'ère CSS, et ils sont formulés de manière à vous faire passer pour un crétin incompétent et paresseux si vous continuez à utiliser des tableaux pour les mises en page. Une décennie plus tard, ce n'est toujours qu'un rêve idéaliste. Le fait est que la sémantique de la mise en page de flux craint pour les mises en page fixes mais flexibles telles que les interfaces utilisateur et les formulaires. La vérité, c'est que les personnes intelligentes utiliseront des tableaux lorsque cela est pratique, parce qu'elles ont épuisé toutes les solutions CSS possibles et se sont rendu compte qu'elles étaient toutes imparfaites et beaucoup plus complexes que l'utilisation d'un tableau.

Commenté el 4 de Avril, 2011 par Triynko

4 votes

Flotteurs ? Montrez-moi un code qui fonctionne, où les éléments de fin de ligne ne s'enroulent pas de manière imprévisible et où les bordures et les marges n'interrompent pas la mise en page. C'est ce qui ne va pas. Par ailleurs, le conteneur parent de taille automatique s'étend-il correctement pour englober les éléments flottants sans les "clear fix hacks" ? Je ne pense pas que ce soit le cas.

Commenté el 4 de Avril, 2011 par Triynko

Afficher 12 autres commentaires

Answer 1

5 Réponses

Answer 2

176voto

thirtydot Points 114021

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 con overflow: hidden sur .right ?

Répondu el 7 de Avril, 2011 par thirtydot (114021 Points )

63 votes

Si vous vous considérez comme un développeur web, vous devez cliquer sur ce lien. Je l'ai fait, et je me suis sentie comme Jasmine sur un tapis magique.

Commenté el 1 de Novembre, 2011 par Chris Shouts

2 votes

@ChrisShouts, c'est probablement la meilleure façon de décrire cela. Cette méthode n'a aucun sens, mais encore une fois... Une merveilleuse solution de contournement pour quelque chose que vous devriez être en mesure de faire explicitement.

Commenté el 2 de Décembre, 2011 par mjvotaw

0 votes

J'ai mis à jour la page jsfiddle pour prendre en compte une troisième ligne, tout en conservant le contenu flexible.

Commenté el 30 de Janvier, 2012 par worked

Afficher 13 autres commentaires

Answer 3

73voto

Panu Horsmalahti Points 1067

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/

Répondu el 29 de Mai, 2015 par Panu Horsmalahti (1067 Points )

Answer 4

48voto

Frosty Z Points 8935

Compatible avec les navigateurs 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>

Répondu el 26 de Novembre, 2013 par Frosty Z (8935 Points )

11 votes

L'argument contre l'utilisation des tableaux n'a rien à voir avec leurs caractéristiques de présentation. Il s'agit d'un balisage ingérable, d'une confusion style/document et d'une sémantique inappropriée. Aucun de ces arguments ne s'applique aux display:table .

Commenté el 14 de Mars, 2017 par Rich Remer

1 votes

Cela ne répond pas à la question de savoir comment faire inline-block remplir le reste de la ligne.

Commenté el 1 de Juin, 2018 par TranslucentCloud

2 votes

@TranslucentCloud Je suis d'accord que ma réponse ne répond pas exactement au titre de la question, mais elle fournit un moyen de remplir la largeur disponible en utilisant des divs, comme demandé dans le corps de la question.

Commenté el 1 de Juin, 2018 par Frosty Z

Afficher 1 autres commentaires

Answer 5

7voto

SuperIRis Points 111

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

Sachez qu'il ne doit pas y avoir d'espace entre les balises, sinon vous devrez 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/

Répondu el 10 de Août, 2018 par SuperIRis (111 Points )

Answer 6

3voto

Vladislav Kovechenkov Points 117

J'ai utilisé flex-grow pour atteindre cet objectif. Vous devrez définir display: flex pour le conteneur parent, vous devez alors définir flex-grow: 1 pour le bloc dont vous voulez remplir l'espace restant, ou simplement flex: 1 como tanius mentionnés dans les commentaires.

Répondu el 26 de Mai, 2019 par Vladislav Kovechenkov (117 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: