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é
26126 affichage: Nombre de visites la question a
4 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

4 Réponses

Answer 2

0voto

Fanky Points 13

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/

(à partir de CSS Float : Flottement d'une image à gauche du texte )

Répondu el 28 de Février, 2018 par Fanky (13 Points )

Answer 3

0voto

chowey Points 1111

Si, comme moi, vous voulez quelque chose qui s'étende jusqu'à la fin de la ligne même si la boîte de gauche s'enroule, alors JavaScript est la seule option.

J'utiliserais la fonction de calcul pour y parvenir :

Array.from(document.querySelectorAll(".right")).forEach((el) => {
  el.style.width = `calc(100% - ${el.offsetLeft + 1}px)`;
});

.container {
    outline: 1px solid black;
}

.left {
   outline: 1px solid red;
}

.right {
    outline: 1px solid green;
}

<div class="container">
  <span class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique aliquet quam, at commodo lorem fringilla quis.</span>
  <input class="right" type="text" />
</div>

Répondu el 3 de Mai, 2022 par chowey (1111 Points )

Answer 4

0voto

user3604103 Points 1

Une solution utilisant la grille et les unités fractionnaires (fr) :

/* For debugging and visibility */
html, body {
    border: 2px  solid navy;
}
.grid-layout { 
    border: thick solid sandybrown;
    background-color: gray;
} 
.grid-layout div:nth-child(odd) {
    border: 2px solid brown;
    background-color: azure;
}
.grid-layout div:nth-child(even) {
    border: 2px solid red;
    background-color: lightyellow;
}

/* Grid layout.
 * Horizontal and vertical gaps.
 * two columns, fixed and responsive.
 * Note no containing div per line.
 */
.grid-layout {
    display: grid;
    gap: 4px 2px ;
    grid-template-columns: 100px 1fr;
}

<p>How to make an element fill the remainder of the line?</p>
<p>Note no encompassing div per line.</p>

<div class="grid-layout">
    <div>Lorem ipsum line 1</div>
    <div>Lorem ipsum dolor sit amet,
         consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore
         et dolore magna aliqua.</div>
    <div>Lorem ipsum line 2</div>
    <div>Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat.</div>
</div>

Une solution similaire avec des divs englobantes :

 .lineContainer {
   display: grid;
   gap: 2px 4px;
   grid-template-columns: 100px 1fr;
 }

<p>Display grid per line.</p>
<div class="lineContainer">
  <div style="border:1px solid black; ">
    Lorem ipsum &hellip;
  </div>
  <div style="border:1px solid black; ">
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua.
  </div>
</div>

Répondu el 2 de Novembre, 2022 par user3604103 (1 Points )

Answer 5

0voto

Nick Manning Points 643

Si vous ne pouvez pas utiliser overflow: hidden (parce que vous ne voulez pas overflow: hidden ) ou, si vous n'aimez pas les solutions de contournement CSS, vous pouvez utiliser JavaScript à la place. Notez qu'il se peut que cela ne fonctionne pas aussi bien parce qu'il s'agit de 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/

Répondu el 26 de Septembre, 2014 par Nick Manning (643 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: