Czysty układ 3-kolumnowy CSS3, od czego zacząć?

Question

Aktualnie aktualizuję dość starą stronę internetową (ostatnia aktualizacja miała miejsce około 2001 roku) i zgodziłem się używać HTML5 i CSS3.

Dla ogólnego projektu pracuję nad bardzo czystym stylem odcieni bieli i szarości, z wieloma podkładkami i marginesami. Mój problem występuje na stronie głównej: chciałbym mieć 3-kolumnowy układ centralny. Ale od czego zacząć? Próbowałem pływać, ale na próżno.

Czy robię to dobrze?

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 powinno być tak:

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

Celem własności CSS pływak jest, ogólnie rzecz biorąc, aby przesunąć element blokowy w lewo lub w prawo, usuwając go z t on płynie w stosunku do innych elementów bloku. Pozwala to na zawijanie naturalnie płynącej treści wokół elementu pływającego. Ta koncepcja jest podobna do tego, co można zobaczyć na co dzień w literaturze drukowanej, gdzie zdjęcia i inne elementy graficzne są wyrównane z jednej strony, podczas gdy inne treści (zwykle tekst) płyną naturalnie wokół elementu wyrównanego w lewo lub w prawo.

Aby uzyskać więcej informacji należy przeczytać ten ciekawie article.

zobaczyć ten Demo: http://jsfiddle.net/akhurshid/YRWLV/

Answer 2

Wystarczy spróbować umieścić div rtcol beofre le ppłk 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

Twój HTML jest bardzo czyste - jest to wielki krok naprzód.

Musisz dodać float: left do wszystkich kolumn. Aby upewnić się, że zmienna float została anulowana po kolumnach, najlepiej jest dodać element clear div po pływających kolumnach.

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

Więc dodać css3 znacznik do tej questio więc proponuję zrobić to z układu kolumn CSS3:

More info

np

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

To nie działa na IE.

Answer 5

Użyj jednej z tych wypróbowanych i przetestowanych implementacji zamiast implementować własną. Oprócz tego, że otrzymasz sprawdzony i działający kod, dodasz responsywność do witryny przy niemal zerowym wysiłku.

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

i wiele więcej jeśli google ..

Answer 6

może również wykorzystywać własności schematu flexbox za to teraz jak dobrze, więc don nie musisz się martwić o pływaki czy poprawki.

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 pokazuje poparcie dla niej nie jest tak daleko wzdłuż jak byś pewnie podoba, jednak istnieją sposoby, aby poprawić obsługę przez zmieszanie stare wersje składni z nowym http://css-tricks.com/using-flexbox/ ma wielką napisać na to od Chrisa Coyiera, jeśli chcesz zagrać z tym dla następnego projektu (ten post jest dość stary). Można również uzyskać więcej szczegółów na http://html5please.com/#flexbox

Ponadto, jeśli używasz HTML5 pewnie bym go z odcinków nad div bardziej semantycznej struktury, więc porównanie będzie wyglądać mniej więcej tak:

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