web-dev-qa-db-fra.com

Comment aligner 3 DIV les uns à côté des autres?

J'ai besoin de créer 3 DIV dans un DIV de conteneur de pied de page qui sont alignés à gauche, au milieu et à droite. Tous les exemples CSS que j'ai vus utilisent des flottants comme je l'ai fait. Cependant, pour une raison quelconque, DotNetNuke n'analyse pas correctement le CSS. Je constate que le volet gauche flotte correctement, mais les volets droit et central sont positionnés immédiatement en dessous et non à côté. Voici un extrait de mon fichier ascx:

<div id="footer">
<div id="footerleftpane" runat="server">
    <dnn:LOGO id="dnnLogo" runat="server" />
    <h3>Driving business performance.</h3>
    <h3>Practical Sales and Operations Planning</h3>
    <h3>for medium sized businesses.</h3>
</div>
<div id="footerRightPane" runat="server">
    <dnn:COPYRIGHT id="dnnCopyright" runat="server" /><br />
    <dnn:PRIVACY id="dnnPrivacy" runat="server" />
    <dnn:TERMS id="dnnTerms" runat="server" />
</div>
<div id="footerMidPane" runat="server">
</div> 
</div>

Voici la partie pertinente de mon fichier CSS:

#footer
{
width: 960px;
border: 1px;
}
#footerleftpane
{
width: 300px;
float: left;
}
#footerRightPane
{
width: 300px;
float: right;
}
#footerMidPane
{
padding:10px;
}

Quelles modifications dois-je apporter à ce qui précède pour obtenir la disposition souhaitée?

Mise à jour: j'ai essayé le changement suggéré mais la mise en page ne fonctionne toujours pas comme on le voit sur cette page salesandoperationsplanning.net qui montre ce que je veux .

cssdotnetnukeskinning
11
SidC

Tout d'abord, vous devez cibler les noms des éléments qui apparaissent dans votre HTML. On dirait que votre CMS ajoute une sorte de préfixe et que vos identifiants ne correspondent pas. (Vous avez #footerleftpane mais il s'affiche comme #dnn_footerleftpane)

De plus, comme vous utilisez un conteneur à largeur fixe, les problèmes générés par le fait de ne pas transmettre une largeur au conteneur central sont inutiles. Donnez-lui une largeur et voyez si cela fonctionne. Si ce n'est pas le cas, vous pouvez essayer deux autres méthodes, si vos blocs sont dans le bon ordre source (gauche, centre, droite).

  1. Vous pouvez les faire flotter tous à gauche, en vous assurant que ses largeurs et rembourrages s'adaptent au conteneur.

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  width: 300px;
  float: left;
  ....
}

  2. Vous pouvez utiliser display: inline-block, en veillant également à adapter vos largeurs et rembourrages sur le conteneur

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  ....
  display: inline-block;
  ...
}
18
Alma

c'est une question de positions, de dimensions et de fausses déclarations css.

1) position Vous avez le volet central après celui de droite dans votre source de page!

2) dimensions J'ai fait un test rapide et vous pouvez enquêter plus avant, mais 300 px est trop pour la largeur des panneaux latéraux. Quelque chose dans le contenu modifie probablement la largeur.

3) déclarations css DotNetNuke (en fait tous les contrôles ASP.Net le font) rend les contrôles côté serveur (déclarés comme runat = "server") en leur attribuant un identifiant unique, ainsi ce que vous attendez d'être #footerleftpane dans votre css, sera #dnn_footerleftpane .

Après avoir repositionné votre volet central juste ... au milieu des deux autres, modifiez votre CSS comme ceci:

    #footer
    {
        width: 960px;
        height: auto;
        margin:0;
        padding:0;
        border: 0;
    }

    #dnn_footerleftpane, #dnn_footerRightPane{
        width: 290px;
        float: left;
    }

    #dnn_footerMidPane
    {
        width: auto;
        float: left;
    }
1
Trapias

Votre conteneur de pied de page mesure 960 pixels. Votre élément gauche et droit fait 300 pixels mais vous n'avez pas spécifié de largeur pour votre élément central, il prend donc par défaut la pleine largeur de son parent, ce qui le pousse automatiquement vers une nouvelle ligne.

Soustrayez le remplissage et l'élément central ne peut pas être plus large que 340 pixels.

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

#footerMidPane{
    width: 340px;
    float: left;
    padding: 10px;
}​
0
Sparky