HTML layout: thêm cột bên phải trang web hiện

Tôi có một trang web với một cơ thể trông giống như thế:HTML layout: thêm cột bên phải trang web hiện

<body> 
    <div id="header">...</div> 
    <div id="content">...</div> 
    <div id="footer">...</div> 
</body>

Không tuyệt đối/thủ thuật định vị tương đối được sử dụng trong những div s, nhưng có rất nhiều float s, clear s, margin s và padding s theo kiểu div s và các yếu tố bên trong của chúng. Tất cả điều này mang lại một trang web trông như thế:

┌───────────────┐ 
│  header │ 
└───────────────┘ 
┌───────────────┐ 
│ content │ 
└───────────────┘ 
┌───────────────┐ 
│  footer │ 
└───────────────┘

Câu hỏi của tôi là: làm thế nào để tôi thêm một chiều rộng cố định độc lập cột bên trái (sidebar) với nội dung bổ sung mà sẽ co lại toàn bộ trang web (header-content-footer) và dịch chuyển sang phải.

┌────┐┌─────────┐ 
│side││ header │ 
│bar │└─────────┘ 
│ │┌─────────┐ 
│ ││ content │ 
│ │└─────────┘ 
│ │┌─────────┐ 
│ ││ footer │ 
└────┘└─────────┘

tôi biết một giải pháp gần như lý tưởng, nhưng nó là xấu xí và đòi hỏi phải tái làm tổ divs hiện:

<body> 
    <table> 
    <tr> 
     <td id="sidebar">...</td> 
     <td> 
     <div id="header">...</div> 
     <div id="content">...</div> 
     <div id="footer">...</div> 
     </td> 
    </tr> 
    </table> 
</body>

Có thể làm như vậy tao nhã, chỉ cần thêm một yếu tố bên ngoài đâu đó trong cơ thể, tức là, như thế?

<body> 
    <div id="sidebar">...</div> 
    <div id="header">...</div> 
    <div id="content">...</div> 
    <div id="footer">...</div> 
</body>

Tôi đã thử các cách tiếp cận ngây thơ - chẳng hạn như phong cách:

#sidebar { float: left; width: 20em; }

hoặc

#header { margin-left: 20em; } 
#content { margin-left: 20em; } 
#footer { margin-left: 20em; }

Đây là loại công trình, nhưng nó phá vỡ trong thời gian sớm clear: both hoặc clear: left đang gặp phải trong tiêu đề/content/footer.

Vì vậy, có bất kỳ giải pháp thay thế nào cho giải pháp bảng không?

Nguồn

2013-08-09 GreyCat

Tôi thích sử dụng thanh bên được định vị hoàn toàn, sau đó đặt padding trên trình bao bọc thành chiều rộng của phần tử đó. Sau đó, tôi hoặc thiết lập margin-padding trên các yếu tố khác, hoặc tôi thêm nó vào padding trên wrapper.

http://jsfiddle.net/jAVQv/

<div class="container"> 
    <div id="sidebar"></div> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

.container { position:relative; padding:0 0 0 55px; } 
#sidebar { 
    position:absolute; 
    top:0; bottom:0; left:0; 
    width:50px; 
    background:#000; 
} 

#header { border:1px solid #000; width:100px; height:20px; 
    margin:0 0 5px 0; 
} 
#content { border:1px solid #000; width:100px; height:50px; 
    margin:5px 0 5px 0; 
} 
#footer { border:1px solid #000; width:100px; height:20px; 
    margin:5px 0 0 0; 
}

Nguồn

2013-08-09 13:57:47

Cảm ơn! Giải pháp này cũng bao gồm tiêu đề/nội dung/chân trang làm tổ lại, nhưng ít nhất nó không cồng kềnh như giải pháp dựa trên bảng. Có thể nào giữ lại đầu trang/nội dung/chân trang trong 'nội dung'? Tôi đoán có thể tạo kiểu 'body' với vị trí tương đối và đệm? – GreyCat

Ở đây bạn đi, giải pháp của bạn cũng hoạt động trên 'body': http://jsfiddle.net/jAVQv/1/ - có vẻ như đó là chính xác những gì tôi cần ở đây. Tôi hiểu rằng kiểu dáng 'body' là một thực hành không tốt, nhưng tôi đoán nó tốt hơn tất cả các lựa chọn thay thế (tức là làm tổ lại) trong trường hợp này. – GreyCat

tôi đã thực hiện một chút jsfiddle để giúp bạn bắt đầu. Ngoài ra, bạn có thể muốn kiểm tra xem nội dung div của bạn có làm rối tung toàn bộ CSS hay không. Hi vọng điêu nay co ich.

Chỉnh sửa: tất cả các màu và kích thước là các hình giả được sử dụng cho ví dụ. Nó shoudk làm việc với bất kỳ kích thước.

html:

<body> 
    <div id="sidebar">...</div> 
    <div id="header"> 
     <div id="testLeft"></div> 
     <div id="testRight"></div> 
     <div class="clearFix"></div> 
    </div> 
    <div id="content">...</div> 
    <div id="footer">...</div> 
</body>

css:

.clearFix { 
    clear: both; 
} 

#sidebar { 
    width: 50px; 
    height: 30px; 
    background-color: green; 
    float: left; 
} 

#header { 
    width: 250px; 
    background-color: red; 
    margin-left: 55px; 
} 

#testLeft { 
    width: 50px; 
    height: 50px; 
    float: left; 
    background-color: pink; 
} 

#testRight { 
    width: 50px; 
    height: 50px; 
    margin-left: 55px; 
    background-color: purple; 
} 

#content { 
    width: 250px; 
    height: 20px; 
    background-color: blue; 
    margin-left: 55px; 
} 

#footer { 
    width: 250px; 
    height: 20px; 
    background-color: orange; 
    margin-left: 55px; 
}

Nguồn

2013-08-09 13:58:38 Lapidouce

Cảm ơn jsfiddle. Nó hoàn toàn minh họa chính xác những gì tôi đang nói về: 'clear' không phá vỡ mọi thứ ở đây - nếu bạn sẽ làm cho chiều cao của thanh bên dài hơn, tiêu đề sẽ trở thành khổng lồ: http://jsfiddle.net/FbQZx/1/ – GreyCat

Sự cố không xảy ra Không xảy ra nữa bất cứ khi nào tôi đặt chiều cao được xác định cho tiêu đề: [http://jsfiddle.net/FbQZx/1/](http://jsfiddle.net/FbQZx/1/) – Lapidouce

Bạn dường như không có Hơn nữa, thiết lập chiều cao cố định cho tiêu đề (hoặc nội dung, hoặc chân trang) không phải là một lựa chọn cho trường hợp của tôi - đặc biệt là cho nội dung. – GreyCat

Tôi muốn sử dụng các yếu tố HTML5 để cung cấp cho các ý nghĩa ngữ nghĩa đánh dấu.

<body> 
    <aside><!-- Nav bar --></aside> 
    <article> 
    <header>...</header> 
    <section>...</section> 
    <footer>...</footer> 
    </article> 
</body>

Sau đó, phong cách aside và article với float: left.

Nguồn

2013-08-09 14:02:15 James

HTML layout: thêm cột bên phải trang web hiện

Trả lời

Các vấn đề liên quan