Comment positionner ce en utilisant uniquement CSS et aucune table

Je veux placer ce fragment de code HTMLComment positionner ce en utilisant uniquement CSS et aucune table

<div id="D1"> 
    <div id="D1.1">HeaderText</div> 
    <div id="D1.2"> From 
    <input id="from" name="from" value=""/> 
    </div> 
    <div id="D1.3"> To 
    <input id="To" name="To" value=""/> 
    </div> 
</div>

cette façon

+-(D1)-------------------------------------------------------------------------+ 
|+-(D1.1)---------------------------++-(D1.2)-------------++-(D1.3)-----------+| 
||         || +-(from)-------+|| +-(to)---------+|| 
|| HeaderText      ||From|    |||To|    ||| 
||         || +--------------+|| +--------------+|| 
|+----------------------------------++--------------------++------------------+| 
+------------------------------------------------------------------------------+

utilisant CSS

choses que je dois:

D1.1 doit être aligné à gauche et D1.2 y D1.3 doit prendre seulement le sp as ils ont besoin et doivent être alignés à droite.
Même si j'ai représenté ici la largeur de D1.1 pour prendre tout l'espace horizontal restant, il n'est pas nécessaire de le faire. D1 devrait croître verticalement pour contenir complètement D1.1, D1.2, D1.3. (Aucun débordement, tous divs complètement visibles)
La conception doit être fluide (à savoir si je change les tailles de police du texte à l'intérieur des divs, la mise en page s'ajuster en conséquence.

Est-il possible de faire tout de ce en utilisant uniquement CSS et sans tableaux? Comment?

Source

2010-08-03 Yanko Hernández Alvarez

Il est possible certainement. Qu'avez-vous essayé? – Cfreak

Vous devriez envelopper votre "De" et "À" dans '' tags: ' De' –

Yanko,

Votre nom d'identification ont des périodes en eux et ce sera un problème en CSS depuis la période est réservée. La meilleure chose est de ne pas utiliser de caractères réservés dans les noms mais si vous devez les avoir, alors vous devez échapper aux périodes avec une barre oblique inverse. Le balisage peut rester tel quel.

Voici le CSS:

 
#D1 { 
    background-color: gold; 
    padding: 10px; 
    overflow: auto; 
} 
#D1\.1 , #D1\.2 , #D1\.3 { 
    float: left; 
    padding: 10px; 
}

Si vous avez besoin d'aide pour comprendre la propriété de débordement, voici une tutorial qui discute.

===

Source

2010-08-03 22:02:08 websea

C'était pseudo-html. Les périodes consistaient à clarifier la relation hiérarchique des divs dans le diagramme. –

Je l'ai testé et puis ça m'a frappé !!! Je suis vraiment désolé. Je voulais dire D1.2 et D1.3 aligné à droite. Va le réparer maintenant! Mon mauvais –

J'ai fait la chose évidente et séparé le style de D1.1 du reste des frères et sœurs, et droit flotté D1.2 et D1.3. mais ils ont changé de place. Comment puis-je résoudre ce problème sans connaître les largeurs? –

Layout Gala est une très bonne référence pour des mises en page CSS.

Vous pouvez jeter un oeil à this layout, ou peut-être this layout car ils regardent tous les deux à peu près comme ce vous demandez:

Bonne chance, et j'espère que cela aidera certains.

Source

2010-08-03 20:16:17 Chris

Wow, gentil. Laissez-moi le voir en détail. –

 
#D1 { 
    background-color: gold; 
    padding: 10px; 
    overflow: auto; 
} 
#D1\.1 { 
    float: left; 
    padding: 10px; 
} 

#D1\.2 , #D1\.3 { 
    float: right; 
    padding: 10px; 
} 

</style> 

</head> 
<body> 


<div id="D1"> 
    <div id="D1.1">HeaderText</div> 

    <div id="D1.3"> To 
    <input id="To" name="To" value=""/> 
    </div> 
    <div id="D1.2"> From 
    <input id="from" name="from" value=""/> 
    </div> 
</div> 

</body> 
</html>

Source

2010-08-05 20:32:25 websea

Comment positionner ce en utilisant uniquement CSS et aucune table

Répondre

Questions connexes