Comment positionner deux divs horizontalement dans un autre div ?

Question

Comment positionner deux divs horizontalement dans un autre div ?

Demandé el 27 de Novembre, 2008: Quand la question a-t-elle été
90692 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je n'ai pas joué avec les CSS depuis trop longtemps et je suis sans références pour le moment. Ma question devrait être assez simple, mais la recherche sur Google n'apporte pas de réponse suffisante. Alors, pour ajouter à la connaissance collective...

|#header---------------------------------------------------------------|
|                               TITLE                                  |
|#sub-title------------------------------------------------------------|
|bread > crumb                    |                  username logout   |
|#sub-left                        |                          #sub-right|
|---------------------------------|------------------------------------|

C'est ce que je veux pour ma maquette. Le titre en tout cas. Je voulais que le sous-titre contienne sub-gauche ET sub-droit. Quelles règles css dois-je utiliser pour m'assurer qu'un div est lié par les attributs d'un autre div. Dans ce cas, comment puis-je m'assurer que les attributs sub-gauche et sub-droit restent dans le sous-titre ?

Demandé el 27 de Novembre, 2008 par Josh Smeaton

Answer 1

5 Réponses

Answer 2

65voto

Darko Z Points 16570

C'est une idée fausse très répandue que vous avez besoin d'une div clear:both en bas de page, alors que ce n'est pas le cas. Bien que la réponse de foxy soit correcte, vous n'avez pas besoin de cette div d'effacement inutile et non sémantique. Tout ce que vous avez à faire est de coller un overflow:hidden sur la div contenant comme ceci :

#sub-title { overflow:hidden; }

Répondu el 27 de Novembre, 2008 par Darko Z (16570 Points )

Answer 3

35voto

foxy Points 1690

Quand tu flottes sub-left y sub-right ils n'occupent plus d'espace dans sub-title . Vous devez ajouter un autre div avec style = "clear: both" en dessous d'eux pour développer le div contenant ou ils apparaissent en dessous.

HTML :

<div id="sub-title">
   <div id="sub-left">
      sub-left
   </div>
   <div id="sub-right">
      sub-right
   </div>
   <div class="clear-both"></div>
</div>

CSS :

#sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}

Répondu el 27 de Novembre, 2008 par foxy (1690 Points )

Answer 4

9voto

csexton Points 8089

Cela devrait faire ce que vous recherchez :

<html>
    <head>
        <style type="text/css">
            #header {
                text-align: center;
            }
            #wrapper {
                margin:0 auto;
                width:600px;
            }
            #submain {
                margin:0 auto;
                width:600px;
            }
            #sub-left {
                float:left;
                width:300px;
            }
            #sub-right {
                float:right;
                width:240px;
                text-align: right;
            }
        </style>

    </head>
    <body>
        <div id="wrapper">
            <div id="header"><h1>Head</h1></div>
            <div id="sub-main">
                <div id="sub-left">
                    Right
                </div>
                <div id="sub-right">
                    Left
                </div>
            </div>
        </div>
    </body>
</html>

Et vous pouvez contrôler l'ensemble du document avec la classe wrapper, ou seulement les deux colonnes avec la classe sub-main.

Répondu el 27 de Novembre, 2008 par csexton (8089 Points )

Answer 5

9voto

Justin Lucente Points 556

Je suis d'accord avec Darko Z pour appliquer "overflow : hidden" à #sub-title. Cependant, il faut mentionner que la méthode overflow:hidden pour effacer les flottants ne fonctionne pas avec IE6, sauf si vous avez une largeur ou une hauteur spécifiée. Ou, si vous ne voulez pas spécifier de largeur ou de hauteur, vous pouvez utiliser "zoom : 1" :

#sub-title { overflow:hidden; zoom: 1; }

Répondu el 28 de Novembre, 2008 par Justin Lucente (556 Points )

Answer 6

5voto

James Piggot Points 357

Cette réponse s'ajoute aux solutions ci-dessus pour répondre à votre dernière phrase qui se lit comme suit :

comment faire en sorte que les sous-gauche et les sous-droite restent dans le sous-titre ?

Le problème est qu'au fur et à mesure que le contenu de la sous-gauche ou de la sous-droite s'étend, il s'étend sous le sous-titre. Ce comportement est prévu dans les CSS, mais il pose des problèmes à la plupart d'entre nous. La solution la plus simple est d'avoir un div qui est stylé avec la déclaration CSS Clear.

Pour ce faire, incluez une déclaration CSS pour définir un div de fermeture (peut être Clear Left ou RIght plutôt que les deux, selon les déclarations Float utilisées :

#sub_close {clear:both;}

Et le HTML devient :

<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>

Désolé, je viens de réaliser que ceci a été posté précédemment, je n'aurais pas dû faire cette tasse de café pendant que je tapais ma réponse !

@Darko Z : vous avez raison, la meilleure description de la solution overflow:auto (ou overflow:hidden) que j'ai trouvée se trouvait dans un message sur SitePoint il y a quelque temps. Nettoyage simple des FLoats et il y a aussi une bonne description dans un article de 456bereastreet Conseils et astuces CSS Partie 2 . Je dois admettre que j'ai été trop paresseux pour mettre en œuvre ces solutions moi-même, car la fermeture de la div fonctionne bien, même si elle est bien sûr très inélégante. Je vais donc faire un effort à partir de maintenant pour mettre de l'ordre dans mes affaires.

Répondu el 27 de Novembre, 2008 par James Piggot (357 Points )

Comment positionner deux divs horizontalement dans un autre div ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment positionner deux divs horizontalement dans un autre div ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: