3 kolumny, środkowa z elastyczną szerokością

Question

3 kolumny, środkowa z elastyczną szerokością

Chciałbym mieć układ, który składa się z trzech sąsiadujących div. Boczne divy mają statyczną szerokość (może się zmieniać poprzez javascript) i środkowy div wypełnia pozostały obszar. Kiedy pierwszy rozmiar div zmienia się, wpływa tylko na środkowy. Jest podobny do tabeli (z dynamicznym renderowaniem), która składa się z trzech kolumn.

Ok, ale gdzie jest problem. Problem polega na tym, że jeśli w pierwszej kolumnie umieszczę zmiennoprzecinkowy div, a w drugiej i trzeciej block div, to blokowe div zachowują się dziwnie sposób. Są one renderowane w ich kolumnie poniżej pływającego div z pierwszej kolumny. Przykład. W pierwszej i drugiej kolumnie mam pływający div, a block div w trzeciej kolumnie. Blok div jest przesunięty w dół na wysokość pływających div. Div w środkowej kolumnie nie jest przesunięty w pozycji y tylko dlatego, że ma właściwość float left.

Chciałbym, aby każdy z trzech layouting divów był niezależny od siebie. Nie mam pojęcia dlaczego elementy w trzeciej kolumnie pływają div w dwóch pierwszych kolumnach (z właściwością float).

Kod:

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

            </div>
        </div>
</div>

I wynik: wynik

Jak to naprawić. Jak sprawić, by wszystkie layouting divs (kolumny) były niezależne od siebie. Jakieś pomysły?

25

css css-float positioning css-tables

Author: mskfisher, 2011-09-03

Source

1 answers

score 56 · Accepted Answer

Możesz to zrobić, pływając col1 i col3 w lewo i w prawo, o stałej szerokości.

Następnie dodaj lewy i prawy margines do col2 równy szerokości col1 i col3.

Daje to trzy kolumny; col1 i col3 o stałej szerokości i col2 wypełniające dostępną szerokość:

pudełko z zawartością col2 w Kolorze Niebieskim, a jego marginesy w Kolorze Żółtym
(Pole zawartości col2 w Kolorze Niebieskim, a jego marginesy w Kolorze Żółtym)

<div class='container'>
    <div class='right'>
        col3
    </div>
    <div class='left'>
        col1
    </div>
    <div class='middle'>
        col2
    </div>
</div>



.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}

Spróbuj tutaj: http://jsfiddle.net/22YBU/

BTW jeśli potrzebujesz wyświetlacza: table, display: table-row and display: table-cell, use a table; -)