Czy można ustawić szerokość div, aby była taka sama, jak najbliższa rodzeństwo, gdy szerokość na tym div jest width: auto;?

W My Jsfiddle zobaczysz, że mam czerwony, zielony i niebieski div. Chcę, aby Blue DIV dostosowuje się do wielkości zielonego div (który jest dynamiczny). Więc jeśli zielony div działa, aby wynosić 200px, chcę, żeby Blue Div będzie 200px.

Pierwotnie myślałem, że będę w stanie umieścić niebieską div wewnątrz zielonego i ustawionego display: inline-block na dziecko, ale to nie działa.

Jeśli więc zawartość Blue Div wzrośnie, to nie naciska szerokości zielonego Div (lub kontenera div). Jak można to osiągnąć?

0
crmpicco 26 wrzesień 2012, 20:09

2 odpowiedzi

Najlepsza odpowiedź

Jeśli chcesz użyć JavaScript, możesz dostosować szerokość, gdy Div chcesz śledzić zmiany. Korzystanie z jQuery, to proste:

$(document).ready(function() {
    // Function to sync the sizes of the divs
    function syncSize() {
        $("#banner_description").width($(".banner_secondary_title").outerWidth(true));
    }

    // Sync the size when a change is made
    $(".banner_secondary_title").resize(function(e) {
        syncSize();
    });

    // Initial sync after document setup
    syncSize();
});

Oto widelec twojej JSFiddle z tym kodem dodanym, a także dodałem więcej tekstu do drugorzędnego tytułu, aby go rozwinąć pokazać, że działa.

1
Ed Bayiates 26 wrzesień 2012, 17:14

Umieść Blue Div w zielonym div, dodaj naprawdę wysoki ujemny margin-right (-999em lub coś) do niebieskiego div, aby nie rozciąga jego rodzica zielony div.

Alternatywne rozwiązanie: Ustaw niebieski div w zielonym div, daj niebieski div position:absolute. Daj zielony div padding-bottom pasujący do wysokości niebieskiego div. Działa to tylko wtedy, gdy wysokość Blue Div nie jest dynamiczna.

0
Blaise 26 wrzesień 2012, 16:25