Comment placer côte à côte deux éléments HTML de la taille d'un contenu?

Question

Je dois générer la mise en page suivante pour un site Web avec tous les éléments classés en fonction de leur contenu. Je ne peux pas définir la largeur d'un élément - peut-être du conteneur le plus à l'extérieur (0) s'il n'y a pas d'autre moyen.

Le conteneur le plus à l'extérieur (0) est dimensionné par d'autres parties de la mise en page. Il contient plusieurs éléments (1) avec une structure égale. Le conteneur (1) contient un petit contenu (2) - en fait c'est juste un nombre; Pensez-y comme un numéro de chapitre. À la droite de ce numéro se trouve le conteneur (3) avec le contenu réel composé de plusieurs parties (3) à (6). Tous les éléments de contenu (4) à (6) ne sont pas toujours présents; les éléments de contenu présents se déplacent vers le haut du conteneur (3) de sorte que le premier élément de contenu présent est à droite du numéro (2). Les éléments de contenu (4) à (6) peuvent contenir de longs textes qui peuvent être enveloppés.

Enfin cette structure entière est imbriquée trois fois - le conteneur (6) a la même structure que le conteneur (1). Dans le niveau d'imbrication le plus profond, le conteneur (3) contient une table éventuellement très large qui doit être défilable horizontalement.

___________________________________ 
|0 _______________________________ | 
| |1 _____ ___________________ | | 
| | |2 | |3 _______________ | | | 
| | |_____| | |4    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |5    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |6    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |_______________| | | | 
| |   |___________________| | | 
| |_______________________________| | 
|     .     | 
|     .     | 
|     .     | 
| _______________________________ | 
| |1 _____ ___________________ | | 
| | |2 | |3 _______________ | | | 
| | |_____| | |4    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |5    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |6    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |_______________| | | | 
| |   |___________________| | | 
| |_______________________________| | 
|___________________________________| 

Jusqu'à présent, j'ai essayé

• une mise en page en utilisant DIVs mais a échoué à la position (2) et (3) côte à côte
• une mise en page à l'aide DIVs et gauche flottant (2) et (3) mais soit le contenu de (3) flotte autour de (2) ou (3) est déplacé en dessous de (2) si (3) devient large
• une disposition utilisant DIV et flottant à gauche (2) et flottant à droite (3) mais alors l'écart entre (2) et (3) peut devenir arbitrairement large si le contenu de (3) est étroit
• Une mise en page utilisant des tables imbriquées avec deux colonnes - une pour (2) et une pour (3) - mais n'a pas réussi à limiter la largeur des tables à conteneur (0). Les tables très larges au niveau d'imbrication le plus profond poussent toutes les cellules et tables vers la droite.
• une mise en page basée sur DIVs avec des styles d'affichage de la table, mais le soutien du navigateur était pauvre si un a rapidement cette idée
• une mise en page en utilisant la liste ordonnée comme décrit dans ce CSS 2.1 12.4.1 mais cela va mettre les chiffres à l'intérieur (3). En outre, il n'est pas garanti que mes numéros soient consécutifs (mais cela pourrait être corrigé en définissant explicitement les compteurs).

Le résultat final devrait ressembler à ceci.

1 Section Header 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus 
    tortor, egestas id laoreet sit amet, sollicitudin nec ligula. Aliquam vitae 
    justo lacus, non sagittis diam. Vestibulum ante ipsum primis in faucibus. 

    1.1 Question Header 

     Orci luctus et ultrices posuere cubilia Curae; Praesent eu nisi vitae 
     arcu cursus lobortis vitae vitae dui. Duis imperdiet varius molestie. 
     Donec ut fermentum ligula. 

     1.1.1 Nunc dictum, est non vestibulum adipiscing, lacus felis commodo 
      orci, in commodo nibh ante ut dolor. Quisque posuere, lacus non 
      rutrum sollicitudin, lectus sem commodo tellus, at hendrerit lacus 
      neque mattis risus. 
      ________________________________________________________________ 
      |   |   |   |   |   | | 
      | Header | Header | Header | Header | Header | Hea| 
      |___________|___________|___________|___________|___________|____|     
      |   |   |   |   |   | | 
      |   |   |   |   |   | | 
      |___________|___________|___________|___________|___________|____| 
      |   |   |   |   |   | | 
      |   |   |   |   |   | | 
      |___________|___________|___________|___________|___________|____| 
       ____________________________________________________________ 
      |<|____________________________________________________________|>| 

     1.1.2 Nunc dictum, est non vestibulum adipiscing, lacus felis commodo 
      orci, in commodo nibh ante ut dolor. Quisque posuere, lacus non 
      rutrum sollicitudin, lectus sem commodo tellus, at hendrerit lacus 
      neque mattis risus. 

2 Section Header 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus 
    tortor, egestas id laoreet sit amet, sollicitudin nec ligula. Aliquam vitae 
    justo lacus, non sagittis diam. Vestibulum ante ipsum primis in faucibus. 

    2.1 Question Header 

     Orci luctus et ultrices posuere cubilia Curae; Praesent eu nisi vitae 
     arcu cursus lobortis vitae vitae dui. Duis imperdiet varius molestie. 
     Donec ut fermentum ligula. 

Il est correct que des nombres plus importants poussent le contenu plus vers la droite.

1 Section Caption 
    1.1 Question Caption 
10 Section Caption 
    10.1 Question Caption 

Mais l'alignement du contenu est également acceptable. Cela devrait être assez facile à réaliser en utilisant une table complexe au lieu de tables imbriquées.

1 Section Caption 
    1.1 Question Caption 
10 Section Caption 
    10.1 Question Caption 

Ensuite, les chiffres pourraient également être aligné à droite, mais je pense que probablement mieux ressemble aligné à gauche - les longueurs des chiffres ne varient pas beaucoup.

1 Section Caption 
    1.1 Question Caption 
10 Section Caption 
    10.1 Question Caption 

Donc, l'essence du problème est de placer les éléments (2) et (3) côte à côte et les ayant de taille par le contenu. Des idées? Les solutions sémantiques correctes utilisant des listes ordonnées imbriquées préférées aux DIV et DIVs sont légèrement préférées aux tables.

Answer 1

Est-ce que cela fait l'affaire pour vous?

CSS

div { 
    border: #000 solid 1px; 
    padding: 2px; 
    min-height: 20px; 
    min-width: 12px; 
    position: relative; 
} 

HTML

<div style="width:300px;"> 
    <div> 
     <div style="position:absolute;"></div> 
     <div style="margin-left:20px;"> 
      <div></div> 
      <div></div> 
      <div> 
       <div style="position:absolute;"></div> 
       <div style="margin-left:20px;"> 
        <div></div> 
        <div></div> 
        <div> 
         <div style="position:absolute;"></div> 
         <div style="margin-left:20px;"> 
          <div></div> 
          <div></div> 
          <div></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Vous pouvez voir ce que cela fait très rapidement à http://jsfiddle.net/nemophrost/Zrabg/

Answer 2

L'étape 1 consistera à choisir un bon doctype. HTML Strict est juste génial lorsqu'il est utilisé correctement.

L'étape 2 consistera soit à utiliser une feuille de style de réinitialisation, soit à définir explicitement les paramètres div de telle sorte que vous obteniez le dernier bit de conformité du navigateur sur l'affichage.

L'étape 3 est que vous allez avoir besoin d'une combinaison de Divs et de tables. Vous avez commencé ce chemin, mais les tables n'étaient pas contraintes probablement à cause de problèmes de doctype. Réessayer. C'est probablement la seule façon de garder l'item 3 en dessous de 2 s'il dépasse la largeur allouée.