Najlepszy sposób robienia kolumn w HTML/CSS

Szukam sposobu wyświetlania 3 kolumn zawartości. Znalazłem sposób wyświetlania kolumn zawijających, ale nie chcę tego dla tej strony. Poszukuję sposobu, aby powiedzieć trzykrotnie, aby odpowiedzieć 3 razy i wyświetlić obok siebie 3 kolumny. Najlepszym przykładem, jaki mam, jest The Verge (http://www.theverge.com/). Jaki jest najlepszy sposób na zrobienie tego?Najlepszy sposób robienia kolumn w HTML/CSS

Źródło

2012-04-01 muttley91

Zastosowanie pływak w arkuszu stylów? – hjpotter92

Nienawidzę tego mówić, ale czasami po prostu używanie starego szkolnego elementu tabeli jest najprostszym sposobem formatowania treści w wierszach i kolumnach. Wiem, że szukasz trasy css, więc zdecydowałeś się dodać komentarz zamiast odpowiedzi. –

@TheJumpingFrog Użyłem float, ale znajduję niespójne zachowanie w zależności od rozmiaru ekranu. Czy istnieje sposób, aby powiedzieć "zawsze wyświetlać w tym jednym formacie", używając metody float? – muttley91

Proponuję użyć albo <table> lub CSS.

CSS jest preferowany, ponieważ jest bardziej elastyczny. Przykładem może być:

<!-- of course, you should move the inline CSS style to your stylesheet --> 
<!-- main container, width = 70% of page, centered --> 
<div id="contentBox" style="margin:0px auto; width:70%"> 

<!-- columns divs, float left, no margin so there is no space between column, width=1/3 --> 
    <div id="column1" style="float:left; margin:0; width:33%;"> 
    CONTENT 
    </div> 

    <div id="column2" style="float:left; margin:0;width:33%;"> 
    CONTENT 
    </div> 

    <div id="column3" style="float:left; margin:0;width:33%"> 
    CONTENT 
    </div> 
</div>

jsFiddle: http://jsfiddle.net/ndhqM/

Korzystanie pływaka: lewy stałaby 3 kolumny sklejają się ze sobą, wracając z pozostawionych w środku div „polu zawartości”.

Źródło

2012-04-01 18:33:31 AbSoLution8

Myślę, że chcesz, aby 'szerokość' wewnątrz atrybutu stylu:' style = "margin : 0 auto; szerokość: 70%; "'. Ponadto nie jestem świadomy żadnych przeglądarek, które stosują margines do 'div' w domyślnym arkuszu stylów, więc' margin: 0; 'na pływających divach wydaje się zbędne. – steveax

dzięki za przypomnienie o szerokości. Naprawiony. – AbSoLution8

Chcę dodać, że znalazłem odpowiedź Mikey'ego na moje osobiste problemy z formatowaniem. Przyszli czytelnicy, zobacz odpowiedź Mikeya tak samo jak ta. – muttley91

Oprócz 3 konstrukcji ze swobodną kolumną (którą również sugerowałbym), musisz wstawić poprawkę, aby zapobiec problemom z układem z elementami za kontenerem kolumny (utrzymuj kontener kolumny w ruchu, że tak powiem ...) .

<div id="contentBox" class="clearfix"> 
.... 
</div>

CSS:

.clearfix { zoom: 1; } 
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; }

Źródło

2012-04-01 18:40:05

Dziękuję, to naprawiło problem z formatowaniem, który miałem. – muttley91

Nie ma za co. Należy pamiętać, że jest to popularny sposób rozwiązywania problemów z układem elementów pływających (takich jak 'ul' menu). –

Z pewnością odnotuję to, ponieważ nie jest to pierwszy przypadek, w którym mam do czynienia z takimi problemami. Dzięki! – muttley91

powinieneś rozważyć przy użyciu CSS3 za to choć nie obejmują stosowanie prefiksów dostawców.

Szybko zapukałem do wersji fiddle, ale to jest sedno.

<style> 
.3col 
{ 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    column-count:3; 
    column-gap:10px; 
} 
</style> 
<div class="3col"> 
<p>col1</p> 
<p>col2</p> 
<p>col3</p> 
</div>

Źródło

2013-05-31 08:34:06 Stimul8d

Może ci się przydać znajomość obsługi przeglądarki na [w3schools] (http://www.w3schools.com/css3/css3_multiple_columns.asp); IE10 +. Muszę poczekać na lepszą obsługę przeglądarki – Duncanmoo

@ Łącze Duncanmoo jest zepsute, spróbuj tego: http://caniuse.com/multicolumn - obecnie tylko około 14% obsługi przeglądarki przez użycie (76% z prefiksami). – naught101

Chciałbym móc edytować stary komentarz, a tutaj jest obsługa przeglądarki w tym na linku [w3schools] (http://www.w3schools.com/css/css3_multiple_columns.asp). – Duncanmoo

Bootstrap. Sprawdź swój niesamowity system siatki here.

Korzystanie Bootstrap, można zrobić trzy kolumny tak:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    </div> 
</div>

Źródło

2014-04-30 23:17:06 bhekman

Dobra uwaga. Dodałem podstawowy przykład. – bhekman

Można również spróbować.

.col{ 
 
    float: left; 
 
} 
 
.col + .col{ 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 

 
/* or */ 
 

 
.col:not(:nth-child(1)){ 
 
    float:left; 
 
    margin-left: 20px; 
 
}

<div class="row"> 
 
    <div class="col">column</div> 
 
    <div class="col">column</div> 
 
    <div class="col">column</div> 
 
</div>

ref: http://codepen.io/co0kie/pen/gPKNWX?editors=1100

Źródło

2016-02-01 09:46:49 co0kie

Najlepszy sposób robienia kolumn w HTML/CSS

Odpowiedz

Powiązane problemy