Division de pixels et de largeurs de pourcentage côte à côte

Question

J'ai trouvé beaucoup de questions similaires et essayé plusieurs solutions (y compris certaines dispositions dites CSS "du Saint-Graal"), mais elles ne font pas tout à fait ce dont j'ai besoin.

J'ai un div contenant (un bloc contenant un CSS) avec l'id right . À l'intérieur, du côté gauche, je veux un div à largeur fixe (une barre de division, mais son utilisation n'a pas d'importance; id splitpane ); à droite, en remplissant le reste de l’espace, une autre div (id rectangle ci-dessous).

J'ai essayé de faire en sorte que les deux

divs internes affichent: inline-block (avec vertical-align: top ), en définissant celui de gauche sur width: 3px , mais il n’ya aucun moyen de définir le droit d’avoir une largeur de 100% - 3px. J'ai aussi essayé d'utiliser le code float: left / margin-left: -100% / margin-left: 3px , mais il a le même problème: le 100% plus le 3px déborde du bloc contenant le parent et fait apparaître une barre de défilement. (Bien entendu, le problème ne réside pas en soi dans la barre de défilement; je pourrais utiliser overflow: hidden pour le supprimer, mais le contenu de droite serait tronqué.)

Actuellement, j'utilise width: 99.5% pour la division droite, mais c'est un piratage épouvantable (et il est sujet au débordement en fonction de la largeur de l'écran). Cela ressemble un peu à ceci:

<div id="right"><div id="splitpane"></div><div id="right-box">
  ...
</div></div>

Avec CSS comme suit (version flottante, mais la version bloc en-ligne est similaire):

#right {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 85%;  /* this is part of a larger div */
}
#right-box {
  width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */
  height: 100%;
}
#splitpane {
  float: left;
  width: 3px;
  height: 100%;
  background: white;
  border-left: solid gray 1px;
  border-right: solid gray 1px;
  cursor: e-resize;
}

Est-il même possible de faire cela? Ceci concerne une application interne. Par conséquent, les solutions ne doivent fonctionner que dans Firefox 3 (si elles sont spécifiques à FF3, cependant, de préférence, c'est parce que la solution est conforme aux normes mais pas pour les autres navigateurs, pas parce qu'elle utilise Firefox uniquement. code).

Answer 1

Ceci est possible. Étant donné que les éléments au niveau du bloc se développent automatiquement pour occuper tout l'espace horizontal restant, vous pouvez utiliser un élément au niveau du bloc à côté d'un élément flottant non effacé avec la largeur souhaitée.

<style type="text/css">
    div {
        height: 100px;
    }
    #container {
        width: 100%;
    }
    #left {
        background: #FF0;
    }
    #splitpane {
        position: relative;
        float: right;
        background: #000;
        width: 3px;
    }
</style>

<div id="container">
    <div id="splitpane"></div>
    <div id="left"></div>
</div>

Voir http://jsfiddle.net/georeith/W4YMD/1/

Answer 2

Les DIV ne sont pas du bon type d’élément car elles ne "parlent" pas. les uns aux autres. Vous pouvez y arriver facilement avec un tableau:

<table style="width:200px">
<tr>
    <td id="splitpane" style="width: 3px">...</td>
    <td id="rightBox" style="width: 100%">...</td>
<tr>
</table>

La valeur 100% rendra la rightBox aussi large que possible mais dans les limites du tableau.

Answer 3

pourquoi vous n'avez pas utilisé marge-gauche (puisqu'il s'agissait d'une disposition flottante) dans la boîte de droite?

donc pas besoin de créer un diviseur ...

#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}

ouais quelque chose comme ça, je déteste les div vides, ce n’est pas sémantique et c’est comme mettre un séparateur sur le "vieux" chemin de la table

Answer 4

Si la div # right-box ne contient que du contenu non flottant, il peut être judicieux de placer le contenu dans #right à la place et de le laisser entourer le #splitpane flottant.