Dopasuj div (szerokość) wokół pływających divów

Question

Szukałem już od wielu godzin i nie mogłem znaleźć praktycznego rozwiązania dla mojego problemu, więc możesz mi dać radę.

Czego chcę, to div, który owija się wokół pływających div wewnątrz. Zawijanie wysokości nie stanowi dla mnie problemu, ale szerokość nie jest zawijana w prawo, jeśli przeglądarka jest zmieniana na szerokość, gdzie pływające elementy zeskakują w dół.

Oto niektóre przykładowy kod:

HTML:

<div class="wrapper"> 

    <div class="block1"> 
    </div> 

    <div class="block2"> 
    </div> 
</div> 

CSS:

body { 
    border: solid 1px green; 
} 

.wrapper { 
    border: solid 1px red; 
    display: table; 
} 

div { 
    display: block; 
} 

.block1 { 
    float: left; 
    width: 390px; 
    height: 390px; 
    background-color: blue; 
} 

.block2 { 
    float: left; 
    width: 390px; 
    height: 390px; 
    background-color: yellow; 
} 

Więc zasadniczo chcę div owijania, aby zawsze mieć szerokość div wewnątrz potrzebie. Zmieniając rozmiar okna i pozwalając, aby prawy div przeskoczył pod lewą stronę, div zawijający powinien teraz mieć szerokość 390px dla tego przykładu.

Potrzebuję tego rozwiązania w przypadku responsywnej witryny, którą próbuję utworzyć i potrzebuję jej tak szybko, jak to możliwe.

Preferowane byłoby czyste rozwiązanie CSS, ale także JS lub jquery.

Answer 1

Nie można użyć szerokości lub szerokości minimalnej, aby zachować 780px div na "pulpicie", a następnie na niższych szerokościach ekranu, które powodowałyby zawijanie bloków, ustaw szerokość rodzica na 390px. Owinąć je w odpowiednich zapytań mediów i bobs wuja .....

HTH

Answer 2

Javascript jest wysoce prawdopodobne, jedynym sposobem ...

użyciu $(window).resize

oraz: Javascript Browser Width

Po poznaniu szerokości przeglądarki można podzielić dostępne miejsce i określić szerokość elementu opakowania, a tym samym zawinąć pływające elementy div.

Answer 3

dodać

white-space: nowrap; 

do .wrapper

Answer 4

Można użyć zapytania o media CSS na div otoki.Tak:

@media (max-width: 783px) { 
.wrapper { 
    max-width: 390px; 
    } 
} 

Zobacz this codepen na przykład:

Answer 5

jak o modyfikacji tej klasy

.wrapper { 
border: solid 1px red; 
display:table; 
**white-space:nowrap;** 
} 

a może, jeśli chcesz, aby lewy div poprawkę, więc jeśli zmiana rozmiaru okna tylko właściwy div zostanie zmieniony na:

zrób to dla właściwego div:

display: block; 
position: absolute; 
top:0; 
right:0; 
margin-left: *your_fixed_left* px; 

Answer 6

Thx za pomoc wszystkim,

skończyło się robi to z jakiegoś JavaScript odczytując rozmiar okna i ustawienie szerokości otoki ręcznie.

dziękuję!

Answer 7

<div class="wrapper"> 

    <div style="display:table-row"> 

     <div class="block1"> 
     </div> 

     <div class="block2"> 
     </div> 

    </div> 

</div> 



.wrapper { 

    border: solid 1px red; 
    display: table; 

} 

.block1 { 

    display:table-cell; 
    width: 390px; 
    height: 390px; 
    background-color: blue; 

} 

.block2 { 

    display:table-cell; 
    width: 390px; 
    height: 390px; 
    background-color: yellow; 

}