Jak wyrównać 3 DIV obok siebie?

Question

Potrzebuję utworzyć 3 DIV w DIV kontenera DIV, które są wyrównane w lewo, w środku i w prawo. Wszystkie przykłady CSS, które widziałem, wykorzystują pływaki, tak jak ja to zrobiłem. Jednak z jakiegoś powodu DotNetNuke nie analizuje poprawnie CSS. Zauważyłem, że lewy panel unosi się poprawnie, ale prawe i środkowe tafle są umieszczone bezpośrednio pod nim zamiast obok niego. Oto urywek z mojego pliku 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> 

Oto odnośny fragment mojego pliku CSS:

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

Jakie zmiany należy wprowadzić do powyżej aby osiągnąć pożądany układ?

Aktualizacja: próbowałem zasugerować zmianę, ale układ nadal nie działa, jak widać na this salesandoperationsplanning.net page that demonstrates what I want.

Answer 1

Przede wszystkim należy kierować się nazwami elementów wyświetlanych w kodzie HTML. Wygląda na to, że twój CMS dołącza jakiś przedrostek, a twoje identyfikatory nie pasują do siebie. (Masz #footerleftpane, ale renderuje się jako #dnn_footerleftpane)

Ponadto, ponieważ używasz pojemnika o stałej szerokości, nie ma zastosowania do problemów generowanych przez nieprzesłanie szerokości do środkowego pojemnika. Daj mu szerokość i zobacz, czy to działa. Jeśli nie, możesz wypróbować jeszcze dwie metody, jeśli twoje bloki są we właściwym porządku źródłowym (lewo, środek, prawo).

1. Możesz unieść je wszystkie w lewo, upewniając się, że jego szerokość i podkładki pasują do pojemnika.

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

2. Można użyć display: inline-block, również upewniając się, aby pasowały do ​​szerokości i podkładki na pojemniku

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

Answer 2

Kontener stopka jest 960 pikseli. Twój lewy, prawy element & to 300 pikseli, ale nie określiłeś szerokości środkowego elementu, więc domyślnie jest to pełna szerokość rodzica, która sama samodzielnie przesuwa się do nowej linii.

Odejmij wypełnienie, a środkowy element nie może być szerszy niż 340 pikseli.

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

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

Answer 3

to kwestia pozycji, wymiarów i błędnych deklaracji CSS.

1) pozycja Masz środkowe okienko po prawej stronie w źródle strony!

2) wymiary Zrobiłem szybki test i możesz zbadać dalej, ale 300px to za dużo dla szerokości bocznych szyb. Coś w treści prawdopodobnie modyfikuje szerokość.

3) Deklaracje css DotNetNuke (właściwie wszystkie kontrole ASP.Net zrobić) tynki kontrole server-side (zadeklarowane jako runat = "serwer"), przypisując im unikalny identyfikator, a więc to, co można oczekiwać, aby być #footerleftpane w css , będzie #dnn_footerleftpane.

Po repositiong swój środkowy panel po prostu ... w środku dwóch pozostałych, modyfikować swój css tak:

#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; 
    }