Làm cách nào để căn chỉnh 3 DIV cạnh nhau?

Question

Tôi cần tạo 3 DIV trong vùng chứa chân trang DIV được căn chỉnh trái, giữa và phải. Tất cả các ví dụ CSS tôi đã thấy sử dụng phao như tôi đã làm. Tuy nhiên, vì lý do nào đó DotNetNuke không phân tích cú pháp CSS một cách chính xác. Tôi thấy rằng khung bên trái đang nổi một cách chính xác, nhưng khung bên phải và giữa được đặt ngay bên dưới nó thay vì bên cạnh nó. Dưới đây là một đoạn trích từ file ascx của tôi:

<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> 

Dưới đây là phần có liên quan của tập tin CSS của tôi:

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

gì thay đổi mà tôi nên làm ở trên để đạt được bố trí mong muốn?

Cập nhật: Tôi đã thử thay đổi được đề xuất nhưng bố cục vẫn không hoạt động như đã thấy trên this salesandoperationsplanning.net page that demonstrates what I want.

Answer 1

Trước hết, bạn nên nhắm mục tiêu tên của các yếu tố xuất hiện trong HTML của bạn. Có vẻ như CMS của bạn gắn thêm một số loại tiền tố và id của bạn không khớp. (Bạn có #footerleftpane nhưng nó hiển thị dưới dạng #dnn_footerleftpane)

Ngoài ra, khi bạn đang sử dụng vùng chứa có chiều rộng cố định, không có sự cố nào được tạo ra do không truyền chiều rộng cho vùng chứa ở giữa. Cung cấp cho nó một chiều rộng và xem nếu nó hoạt động. Nếu không, bạn có thể thử thêm hai phương pháp nữa, nếu các khối của bạn nằm đúng thứ tự nguồn (trái, giữa, phải).

1. Bạn có thể thả nổi tất cả trái, đảm bảo chiều rộng và phần đệm phù hợp trên vùng chứa.

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

2. Bạn có thể sử dụng display: inline-block, cũng đảm bảo để phù hợp với chiều rộng và miếng đệm không bạn trên thùng

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

Answer 2

chứa chân của bạn là 960 pixel. Phần tử bên phải & bên trái của bạn là 300 pixel nhưng bạn chưa chỉ định chiều rộng cho phần tử ở giữa, vì vậy phần tử mặc định là chiều rộng tối đa của phần tử gốc, tự đẩy chính nó đến một dòng mới.

Trừ phần đệm và phần tử ở giữa không thể rộng hơn 340 pixel.

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

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

Answer 3

đó là một vấn đề của vị trí, kích thước và khai báo css sai.

1) vị trí Bạn có ngăn giữa ở bên phải bảng bên phải trong nguồn trang của mình!

2) kích thước Tôi đã thực hiện kiểm tra nhanh và bạn có thể điều tra thêm, nhưng 300px là quá nhiều đối với chiều rộng của các mặt bên. Nội dung nào đó trong nội dung có thể sửa đổi chiều rộng.

3) khai báo css DotNetNuke (thực ra tất cả điều khiển ASP.Net làm) hiển thị điều khiển phía máy chủ (được khai báo là runat = "server") gán cho chúng một id duy nhất, do đó bạn mong muốn #footerleftpane trong css của bạn , sẽ là #dnn_footerleftpane.

Sau repositiong panel giữa của bạn chỉ cần ... ở giữa hai người còn lại, sửa đổi css của bạn như thế này:

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