Je génère un contour dynamiquement en créant des panneaux et des étiquettes dans ASP.NET. Chaque nœud dans le contour a un numéro de plan et un texte de contour, qui proviennent d'une base de données définissant des nœuds dans une structure de type enfant/parent pour définir l'arborescence. Pour chaque entrée dans le plan, j'aimerais que le div à gauche contienne le numéro du plan et le div à droite pour contenir le texte du plan.Côte à côte Divs avec contenu dynamique
La div gauche doit avoir une largeur min spécifique, comme 50px, et devrait être plus large si nécessaire pour s'adapter à des numéros de contour plus grands, parce que parfois le numéro de plan pourrait être "Section VI". Ou bien, tous les divs du numéro de plan devraient être la largeur de la plus grande largeur requise pour supporter le plus grand nombre de plan.
La division droite doit envelopper le texte si les contraintes du conteneur ou de la fenêtre empêchent le texte d'apparaître sur une seule ligne.
*--------------Window or container----------------*
|Part I. A small amount of outline text. |
| Section. I A larger amount of text is here |
| showing text wrapping in its own |
| block. |
|Part II. More text here with a little wrapping |
| going on. |
|Part III. A little bit more text. |
J'ai essayé beaucoup de combinaison. Je suis nouveau à l'aide de divs, et je ne peux pas trouver une bonne méthodologie pour construire des mises en page. Il semble que tout ce que je trouve est très spécifique à une certaine mise en page et n'est pas vraiment adaptable à autre chose, ou utilise des tailles très spécifiques pour les divs.
Je génère ceci dynamiquement, donc ce n'est pas avant l'exécution que je sais combien de texte ira là-bas. Donc, l'utilisation de tailles fixes et le positionnement absolu n'est pas vraiment viable à moins que je devais faire beaucoup de calculs et de mesures de chaînes, dont j'ai peur de la fiabilité. Je crains d'avoir fini de l'écrire et de trouver des bizarreries dans la cohérence des mesures effectuées par .NET par rapport à la façon dont les navigateurs rendent réellement le texte. Ce n'est pas une grosse affaire ou une exigence, mais en plus, des tailles fixes rendraient le redimensionnement du conteneur externe ou de la fenêtre ne permettrait pas au texte de remplir le nouvel espace, ou lorsque le conteneur/fenêtre est réduite le texte n'emballe pas de manière appropriée et crée une barre de défilement à la place.
Maintenant j'ai un panneau pour le numéro de plan contenant une étiquette, et j'attribue au panneau une classe Css, et le texte de contour est dans un panneau séparé avec sa propre classe css, et enfin les deux sont bourrés dans un panneau qui a une marge gauche définie dynamiquement en fonction de l'indentation. À peu près tout ce que vous pouvez montrer en balise html avec des divs que je peux émuler, étant donné que vous considérez que le contenu est basé sur la base de données et n'a donc pas une largeur prédéterminée.
Si vous pensez que je devrais le faire en créant un tableau à deux colonnes pour chaque entrée, je serais heureux d'avoir votre opinion ici.
Edit: Ceci est une approche que j'ai essayé deux manières différentes:
http://www.alistapart.com/articles/holygrail/
Si le nombre de lignes était trop long, il enveloppait, ou chevaucherait l'autre div, selon la façon dont je peaufiné il. Au lieu de cela, je voudrais que la colonne de gauche se développe pour s'adapter au contenu. Je ne pouvais pas trouver un moyen de le modifier pour accommoder cela. Il n'est pas nécessaire que tous les numéros de plan correspondent dans ces cas particuliers. Si l'impair a une indentation légèrement différente parce que le numéro du contour était trop long, c'est bon. Aussi longtemps que le numéro de plan n'emballe pas ou ne chevauche pas un autre texte.
Édition 2: L'autre chose que j'ai réalisé avec le chemin de la mesure des chaînes, c'est que mes polices sont définies par un fichier * .css. Donc, pendant le chargement de la page, je ne sais pas comment déterminer quelle police sera utilisée, car cela est nécessaire pour mesurer la largeur de la chaîne.
Édition 3: C'est la dernière chose que j'ai essayée mais si le numéro de plan est trop long, il s'enroule et chevauche le contenu vers la droite.
<div id="container">
<div id="center" class="column">Application Information blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<div id="left" class="column">Part VVVVVVVVVVVV.</div>
</div>
#container {
padding-left: 50px; /* LC width */
}
#center {
width: 100%;
position: relative;
float: left;
}
#left
{
position: relative;
float: left;
width: 50px; /* LC width */
right: 50px; /* LC width */
margin-left: -100%;
}
Avez-vous un exemple de HTML que vous pourriez offrir, pour nous de travailler? –