Comment faire pour remplir le reste de la ligne par un élément inline-block?
est-ce qu'une telle chose est possible en utilisant des balises CSS et deux inline-block (ou n'importe quoi) DIV au lieu d'utiliser une table?
la version de table est celle-ci (borders ajouté de sorte que vous pouvez le 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 une Largeur fixe (pas un pourcentage de largeur), et une colonne de droite qui se dilate pour remplir L'espace restant sur la ligne. Sons assez simple, non? En outre, depuis rien n'est" flotté", la hauteur du conteneur parent s'étend correctement pour englober la hauteur du contenu.
--DÉBUT DE LA DIATRIBE--
J'ai vu les implémentations "clear fix" et "holy grail" pour la disposition de plusieurs colonnes avec des colonnes latérales de largeur fixe, et elles sont nulles et compliquées. Ils inverser l'ordre des éléments, ils utilisent pourcentage largeurs, ou ils utilisent des flotteurs, des marges négatives, et la relation entre les les attributs" gauche"," droite "et" Marge " sont complexes. De plus, les mises en page sont sensibles au sous-pixel, de sorte que l'ajout d'un seul pixel de bordures, de capitonnage ou de marges va casser la mise en page entière et envoyer des colonnes entières enveloppant 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 mettre 4 éléments sur une ligne, avec la largeur de chacun réglé à 25%.
--FIN COUP DE GUEULE--
j'ai essayé en utilisant "inline-block" et " white-space: nowrap;", mais le problème est que je ne peux pas obtenir le 2ème élément pour remplir le restant espace sur la ligne. Définir la largeur à quelque chose comme" width:100%-(LeftColumWidth)px " fonctionnera dans certains cas, mais effectuer un calcul dans une propriété width n'est pas vraiment supporté.
6 réponses
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):
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>Compatible avec les browers modernes communs (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> si vous ne pouvez pas utiliser overflow: hidden (parce que vous ne voulez pas overflow: hidden ) ou si vous n'aimez pas CSS hacks/workarounds, vous pouvez utiliser JavaScript à la place. Notez que cela peut ne pas fonctionner aussi bien parce que C'est 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>Quand vous abandonnez la ligne de blocs
.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;
}
vous pouvez utiliser calc (100% - 100px) sur l'élément fluide, ainsi que display:inline-block pour les deux éléments.
soyez conscient qu'il ne doit pas y avoir d'espace entre les étiquettes, sinon vous devrez tenir compte de cet espace dans votre calc aussi.
.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 /