Bố cục 3 cột CSS3 sạch sẽ, bắt đầu từ đâu?

Question

Tôi hiện đang cập nhật một trang web khá cũ (cập nhật lần cuối vào khoảng năm 2001) và đã đồng ý sử dụng HTML5 và CSS3.

Đối với thiết kế chung, tôi đang làm việc theo kiểu tông màu trắng và xám rất sạch sẽ, với nhiều miếng đệm và lề. Vấn đề của tôi nằm trong trang chủ: Tôi muốn có bố cục 3 cột ở giữa. Nhưng bắt đầu từ đâu? Tôi đã thử một số nổi, nhưng vô ích.

Tôi có làm đúng không?

HTML:

<div class="colwrapper"> 
    <div class="ltcol"></div> 
    <div class="ctcol"></div> 
    <div class="rtcol"></div> 
</div> 

CSS:

.colwrapper { width:1020px; } 
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; } 
.ltcol { float:left; } 
.ctcol { margin-left:340px; } 
.rtcol { float:right; } 

Answer 1

css của bạn nên được như thế này:

.ltcol, .ctcol { float:left; } 
.rtcol { float:right; } 

Mục đích của tài sản CSS float được, nói chung, để đẩy phần tử cấp khối sang bên trái hoặc bên phải, lấy phần tử ra khỏi ông chảy liên quan đến các yếu tố khối khác. Điều này cho phép nội dung tự nhiên chảy xung quanh phần tử nổi. Khái niệm này tương tự như những gì bạn thấy mỗi ngày trong tài liệu in, nơi ảnh và các yếu tố đồ họa khác được căn chỉnh sang một bên trong khi nội dung khác (thường là văn bản) chảy tự nhiên xung quanh phần tử trái hoặc phải.

Để biết thêm chi tiết bạn phải có để đọc intresting article.

Xem Demo này: http://jsfiddle.net/akhurshid/YRWLV/

Answer 2

Chỉ cần cố gắng đưa div rtcol beofre le ltcol div.

<div class="colwrapper"> 
    <div class="rtcol">X</div> 
    <div class="ltcol">X</div> 
    <div class="ctcol">X</div> 
    </div>​ 

http://jsfiddle.net/EDjpy/

Answer 3

HTML của bạn là rất sạch sẽ - đây là một bước tiến lớn về phía trước.

Bạn cần thêm float: left vào tất cả các cột. Để đảm bảo phao bị hủy sau cột của bạn, tốt nhất bạn nên thêm một số clear div sau các cột được thả nổi.

HTML:

<div class="colwrapper"> 
    <div class="ltcol">Column 1</div> 
    <div class="ctcol">Column 2</div> 
    <div class="rtcol">Column 3</div> 
    <div class="clear"></div> 
</div>​​​​​​​​​​​​​​​​​ 

CSS:

.colwrapper { width:1020px; } 
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef } 
.ltcol { float:left; } 
.ctcol { float:left; } 
.rtcol { float:left; } 
.clear { clear: left; } 

Answer 4

Vì vậy, bạn thêm css3 thẻ cho questio này vì vậy tôi đề nghị bạn thực hiện điều này với cách bố trí cột css3:

More info

ví dụ

HTML

<div class="colwrapper"> 
    <div>text</div> 
</div> 

CSS

.colwrapper div 
{ 
    -moz-column-count:3; /* Firefox */ 
    -webkit-column-count:3; /* Safari and Chrome */ 
    column-count:3; 
} 

Nó không hoạt động trên IE.

Answer 5

Sử dụng một trong những triển khai đã thử và thử nghiệm này thay vì triển khai của riêng bạn. Ngoài thực tế là bạn sẽ được thử nghiệm và làm việc mã, bạn sẽ thêm phản ứng vào trang web của bạn với nỗ lực gần như bằng không.

• http://cssgrid.net/
• http://960.gs/
• http://framelessgrid.com/
• http://goldengridsystem.com/

và nhiều hơn nữa nếu bạn google ..

Answer 6

cũng có thể sử dụng tài sản Flexbox cho điều này bây giờ là tốt vì vậy bạn don 't cần phải lo lắng về nổi hoặc clearfix của.

main{ 
    /* .colwrapper{ */ 
    display: flex; 
    flex-flow: row; 
    justify-content: center; 
    } 
    main > section{ 
    /* .ltcol,.ctcol,.rtcol{ */ 
    display:flex; 
    flex-flow:column; 
    align-items:center; 
    padding:10px; padding:.625rem; 
    } 

    main > section:nth-child(2){ 
    /* .ctcol{ */ 
    margin:0 20px; margin:0 1.25rem; 
    } 

http://caniuse.com/flexbox cho thấy sự ủng hộ đối với nó không phải là khá xa cùng như bạn có lẽ sẽ thích, tuy nhiên, có nhiều cách để cải thiện hỗ trợ bằng cách trộn các phiên bản cũ của cú pháp với mới http://css-tricks.com/using-flexbox/ có ghi công tuyệt vời trên nó từ Chris Coyier nếu bạn muốn chơi với điều này cho một dự án tiếp theo (bài viết này là khá cũ). Bạn cũng có thể tìm hiểu thêm chi tiết tại http://html5please.com/#flexbox

Ngoài ra, nếu bạn đang sử dụng HTML5 tôi có thể đi với các bộ phận trên divs cho một cấu trúc ngữ nghĩa hơn, do đó, một so sánh sẽ giống như thế này:

<main> 
    <section></section><!-- or <nav></nav> --> 
    <section></section><!-- or <article></article> --> 
    <section></section><!-- or <aside></aside> --> 
</main> 

instead of... 

<div class="colwrapper"> 
    <div class="ltcol"></div> 
    <div class="ctcol"></div> 
    <div class="rtcol"></div> 
</div>