Jak utworzyć kolumny o równej wysokości w czystym CSS [duplicate]

Question

Jak utworzyć kolumny o równej wysokości w czystym CSS [duplicate]

To pytanie ma już odpowiedź tutaj:

CSS-kolumny o równej wysokości? 10 odpowiedzi

Jak sprawić, by Twój div sięgał aż po dół? Jak wypełnić pionową przestrzeń parent div? Jak uzyskać kolumny o równej długości bez użycia obrazów tła?

Spędziłem kilka dni googlując i analizując kod, aby zrozumieć, jak osiągnąć kolumny o równej długości tak łatwe i wydajne, jak to możliwe. To jest odpowiedź, którą wymyśliłem i chciałem podzielić się tą wiedzą ze społecznością Kopiuj i wklej styl w małym samouczku.

Dla tych, którzy myślą, że to duplikat, nie jest. Zainspirowało mnie kilka stron internetowych, wśród nich http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks ale poniższy kod jest unikalny.

13

html css css3 multiple-columns css-float

Author: Paul, 2013-02-08

Source

2 answers

Dla prostszego rozwiązania, możesz podać rodzica display: table i jego dzieci display: table-cell, w następujący sposób:

.parent {
  display: table;
}
.child {
  display: table-cell;
}

Zobacz DEMO .

Proszę zauważyć, że nie działa to w IE7, więc jeśli wymagana jest obsługa IE7, potrzebne byłoby bardziej rozbudowane rozwiązanie.

25

Author: zakangelle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-30 18:36:49

score 7 · Accepted Answer

Jedną z trudniejszych rzeczy w nowoczesnym projektowaniu stron internetowych jest stworzenie układu dwóch (lub więcej) kolumn, w którym wszystkie kolumny mają jednakową wysokość. Wyruszyłem w podróż, aby znaleźć sposób, aby to zrobić w czystym CSS.

Najłatwiej to osiągnąć, używając obrazu tła w wrap-div, który zawiera obie kolumny (lub tło strony).

Można to również zrobić za pomocą komórek tabeli CSS, ale niestety obsługa przeglądarki jest nadal zacieniona, więc nie jest preferowana rozwiązanie. Czytaj dalej, jest lepszy sposób.

Natchnienie znalazłem na dwóch stronach w Internecie, chociaż wolę moje rozwiązanie, ponieważ daje mi większą swobodę korzystania z zaokrąglonych narożników i precyzyjnych szerokości lub układów procentowych, i jest łatwiejsze do edycji, twój ostateczny układ trzymający div nie zmusza cię do robienia ujemnych liczb chrupania.

== the trick: ==

Najpierw tworzysz cols w tle, a następnie umieszczasz div o pełnej szerokości, który może pomieścić twoją zwykłą zawartość. Sztuczka polega na pływających kolumnach wewnątrz kolumn, tworząc efekt push na wszystkich kolumnach nadrzędnych, gdy zawartość rozszerza się na długość, bez względu na to, która kolumna końcowa jest najdłuższa.

W tym przykładzie użyję siatki 2-Kolumnowej w środku zawijanej-div z zaokrąglonymi narożnikami. Starałem się zachować puch, aby ułatwić kopiowanie i wklejanie.

== Krok 1 ==

Stwórz swoją podstawową stronę internetową.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>

== Krok 2 ==

Stwórz jeden pływający div wewnątrz kolejny pływający div. Następnie zastosuj ujemny margines na wewnętrznym div, aby wizualnie usunąć go z ramki. Dodałem przerywane granice dla celów ilustracyjnych. Wiedz, że jeśli unosisz zewnętrzny div w lewo i nadasz wewnętrznemu div ujemny margines w lewo, wewnętrzny div przejdzie pod krawędź strony bez podawania paska przewijania.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        this content obviously only fits the left column for now.
    </div>
</div>
</body>
</html>

== Krok 3 ==

Wewnątrz div: Utwórz div bez tła, który ma z wszystkich kolumn połączonych. Będzie popchnij krawędź wewnętrznego div. Dodałem przerywaną ramkę dla celów ilustracyjnych.To będzie płótno dla Twoich treści.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
    float:left;
    width:400px;
    border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            this content spans over both columns now.
        </div>
    </div>
</div>
</body>
</html>

== Krok 4 ==

Dodaj swoją treść. W tym przykładzie umieszczam dwa div, które są umieszczone nad układem. Usunąłem też przerywane granice. Presto, to jest to. Możesz użyć tego kodu, jeśli chcesz.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            <div id="leftcol">left column content</div>
            <div id="rightcol">right column content</div>
        </div>
    </div>
</div>
</body>
</html>

== Krok 5 ==

Aby było ładniej można wyśrodkować cały projekt w folię Div I DAĆ zaokrąglone rogi. Zaokrąglone rogi nie będą wyświetlane w starym IE, chyba że użyjesz do tego specjalnej poprawki.

<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
    position:relative;
    width:500px;
    margin:20px auto;    
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    border-bottom-right-radius: 20px;
}
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="rightsideBG">
        <div id="leftsideBG">
            <div id="overbothsides">
                <div id="leftcol">left column content</div>
                <div id="rightcol">right column content</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

== źródła inspiracji ==