Cum să aliniați 3 DIV unul lângă celălalt?

Trebuie să creez 3 DIV-uri într-un container subsol DIV care sunt aliniate la stânga, la mijloc și la dreapta. Toate exemplele CSS pe care le-am văzut fac uz de flotoare așa cum am făcut. Cu toate acestea, din anumite motive, DotNetNuke nu parsează corect CSS-ul. Am constatat că panoul din stânga plutește corect, dar geamurile din dreapta și mijlocul sunt poziționate imediat sub el în loc de lângă el. Iată un fragment din fișierul ascx:

<div id="footer">
<div id="footerleftpane" runat="server">
    
    

Driving business performance.

    

Practical Sales and Operations Planning

    

for medium sized businesses.

</div>
<div id="footerRightPane" runat="server">
    
</div> <div id="footerMidPane" runat="server"> </div> </div>

Iată porțiunea relevantă a fișierului meu CSS:

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

Ce modificări ar trebui să fac la cele de mai sus pentru a obține aspectul dorit?

Actualizare: Am încercat o schimbare sugerată, dar aspectul nu funcționează încă așa cum se vede în această pagină de vânzări și operațiuniplanning.net care demonstrează ceea ce vreau .

11
Aș spune că ceva schimbă lățimea # footer , de aceea se schimbă mijlocul și dreapta de mai jos. Puteți aplica o culoare în # footer și confirmați că?
adăugat autor jackJoe, sursa
Am văzut ordinea materiei, mai ales în IE. De obicei, dreapta, stânga, apoi mijlocul mă primește rezultatele vreau cross-browser.
adăugat autor cHao, sursa
În timp ce mă călăuzeam de la CSS și abia am atras atenția asupra HTML-ului nostru, nu țintim elementele în sine. Am actualizat codul pentru a imita structura HTML.
adăugat autor Alma, sursa

3 răspunsuri

Mai întâi de toate, ar trebui să vizați numele elementelor care apar în HTML. Se pare că sistemul tău CMS adaugă un fel de prefix și ID-urile tale nu se potrivesc. (Aveți #footerleftpane dar se redă ca #dnn_footerleftpane)

De asemenea, pe măsură ce utilizați un container cu lățime fixă, nu există nici o problemă pentru problemele generate de faptul că nu treceți de o lățime la containerul de mijloc. Dați-i o lățime și vedeți dacă funcționează. Dacă nu puteți încerca alte două metode, dacă blocurile dvs. sunt în ordinea corectă a sursei (stânga, centrul, dreapta).

  1. You can float them all left, making sure its widths and paddings fit on the container.

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
      width: 300px;
      float: left;
      ....
    }
    
  2. You can use display: inline-block, also making sure to fit your widths and paddings on the container

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
      ....
      display: inline-block;
      ...
    }
    
17
adăugat

este vorba de poziții, dimensiuni și declarații greșite ale CSS.

1) Aveți panoul intermediar după cel corect din sursa paginii dvs.!

2) dimensiuni Am făcut un test rapid și puteți investiga mai departe, dar 300px este prea mult pentru lățimea geamurilor laterale. Ceva din conținut modifică probabil lățimea.

3) declarațiile CSS DotNetNuke (de fapt toate controalele ASP.Net) face ca controalele de pe server (declarate ca runat = "server") să le atribuie un id unic, deci ceea ce vă așteptați să fie #footerleftpane în CSS va fi #dnn_footerleftpane.

După repoziționarea panoului de mijloc doar ... în mijlocul celorlalte două, modificați-vă CSS-ul astfel:

    #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
adăugat
Mare răspuns. Am ajuns sa folosesc clasele CSS pentru a rezolva aceasta in loc de ID-uri.
adăugat autor SidC, sursa

Your footer container is 960 pixels. Your left & right element are 300 pixels but you have not specified a width for your middle element, so it defaults to the full width of its parent, which pushes itself to a new line all by itself.

Scoateți căptușeala și elementul de mijloc nu poate fi mai mare de 340 de pixeli.

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

#footerMidPane{
    width: 340px;
    float: left;
    padding: 10px;
}​
0
adăugat
Eu adaug continutul de mai sus la element, dar acest lucru nu pare sa faca truc. Mai e ceva ce ar trebui să modific?
adăugat autor SidC, sursa
@SidC, nu pot spune. Mi-am luat codul pe măsură ce l-ai postat și i-ai făcut ceea ce ți-ai cerut . Este codul tău actual diferit de cel pe care l-ai postat? Când te uiți la codul pagina ta , poți vedea că id este diferit decât codul id pe care îl utilizați în CSS.
adăugat autor Sparky, sursa
Am editat răspunsul meu doar din cauza acestei discrepanțe, cms pare să adauge un prefix pentru ID-uri
adăugat autor Alma, sursa