Pixel et le pourcentage de la largeur de divs side-by-side

J'ai trouvé beaucoup de questions similaires, et essayé plusieurs solutions (y compris certains de la soi-disant "saint graal" de mises en forme CSS), mais ils ne sont pas tout à fait faire ce dont j'ai besoin.

J'ai un div contenant (CSS contient un bloc) avec l'id right. À l'intérieur sur le côté gauche, je veux une largeur fixe div (une barre de séparation, mais il n'a pas d'importance ce qu'il est utilisé pour des; id splitpane); sur la droite, en remplissant le reste de l'espace, une autre div (id right-box ci-dessous).

J'ai essayé de faire les deux intérieure divs display: inline-block (avec vertical-align: top), réglage de la gauche pour width: 3px, mais alors il n'y a aucun moyen de définir le droit d'avoir la largeur à 100% de 3px. J'ai aussi essayé d'utiliser le float: left/margin-left: -100%/margin-left: 3px truc, mais il a le même problème: le 100%, plus le 3px déborde les parents bloc contenant et provoque une barre de défilement dans une fenêtre contextuelle. (Bien sûr, ce n'est pas la barre de défilement en soi qui est le problème; je pourrais utiliser overflow: hidden de l'enlever, mais alors le contenu sur la droite serait tronquée.)

Actuellement, je suis en utilisant width: 99.5% pour le droit div, mais c'est une terrible hack (et est soumis à débordement en fonction de la largeur de l'écran). Il ressemble un peu à ceci:

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

Avec CSS comme suit (float version, mais le inline-block version 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 possible de faire cela? C'est pour l'une, interne, app., par conséquent, des solutions seulement besoin de travailler dans Firefox 3 (si elles sont spécifiques à FF3, mais, de préférence, c'est parce que la solution est conforme aux normes, mais les autres navigateurs ne sont pas, non pas parce que c'est à l'aide de Firefox uniquement code).

OriginalL'auteur dbrobins | 2009-03-13

css width

C'est possible. Parce que les éléments de niveau bloc étendre automatiquement à toutes les autres lignes de l'espace, vous pouvez utiliser un élément de niveau bloc à côté d'un non défrichées flottait élément de largeur désiré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/

OriginalL'auteur George Reith

3

DIVs sont le mauvais type d'élément pour cela, car ils ne sont pas "parler" les uns aux autres. Vous pouvez le faire 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>
```
L'100% donnera rightBox aussi large que possible, mais dans les limites de la table.

Cette solution semble exiger que je spécifie une largeur absolue de l'élément conteneur (width:200px dans l'exemple ci-dessus); je ne veux pas avoir à le faire. De Plus, je préfère ne pas utiliser des tableaux.
Vous avez seulement besoin de spécifier une largeur si vous n'aimez pas la valeur par défaut de 100%. Et les tables sont OK à utiliser même avec des CSS. DIVs doit être utilisé pour le contenu qui est ci-dessous les uns des autres, et non pas les uns à côté des autres sur la même ligne.
avez-vous entendu parler de CSS float?
Avez-vous entendu parler de tous les problèmes de flotteurs en cause? Comme la création de N éléments avec la même hauteur où N > 2?

OriginalL'auteur Aaron Digulla
2

pourquoi vous n'utilisez pas margin-left (depuis qu'il a été flotteur de mise en page) sur la case de droite?

donc pas besoin de créer un diviseur div...
```
#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*/ */
}
```
oui quelque chose comme ça, je déteste div vide, il n'est pas sémantique, et c'est comme mettre un splitter sur le "vieux" de la table de façon

Les Divs ne sont pas sémantiques dans la première place. Vous êtes supposé utiliser des divs pour marquer des choses qui n'ont pas de sens, c'est pourquoi il est appelé un "div" (division arbitraire).
oui je sais div pas sémantique, ce que je veux dire est "vide" n'a pas été sémantique
Je ne veux pas de spécifier une largeur absolue pour tout sauf pour le séparateur.

OriginalL'auteur Dels
0

Si le div #bouton droit de la boîte est uniquement destiné à contenir de non-flotté contenu, il pourrait être une bonne idée de mettre le contenu à l'intérieur de #droit, au lieu et à la laisser s'enrouler autour de la flottait #splitpane.

OriginalL'auteur Annan

Vous devez vous connecter pour publier un commentaire.