blok blokujący dwa elementy - brak przepływu po zmianie rozmiaru

Question

Poszukuję najlepszego sposobu na utworzenie wielu kolumn za pomocą wbudowanego bloku. Wszystko działa świetnie, z wyjątkiem sytuacji, gdy zmieniana jest wielkość przeglądarki. Druga kolumna zostanie przesunięta pod pierwszą kolumną, tak jak można by tego oczekiwać za pomocą bloku inline. Rozumiem, dlaczego tak się dzieje, muszę wiedzieć, czy istnieje sposób na poziome przewijanie, zamiast pchania drugiej kolumny w dół. Myślałem, że przepełnienie: ukryty zadziała, ale nie wydaje się.

Nie ustawiam teraz żadnych szerokości i chciałbym, aby było tak płynnie jak to możliwe.

<div> 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div> 

col1 i col2 są blokami inline bez zestawu szerokości i wyświetlają się obok siebie, gdy przeglądarka jest wystarczająco szeroka. Gdy przeglądarka użytkownika ma mniejszy rozmiar, col2 wyświetla się pod kolumną col1. Chcę, żeby zawsze byli obok siebie i mieli poziome przewijanie w razie potrzeby.

Answer 1

Dodaj white-space: nowrap do elementu nadrzędnego elementów, które mają display: inline-block.

Answer 2

<div style="width:500px"> // <=== try to make fix width 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div> 

lub spróbuj

<div style="min-width:500px"> // <=== try to make fix width 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div> 

Answer 3

Można spróbować ustawić min-width do zewnętrznej div. Ma więc zastosowanie tylko wtedy, gdy okno jest mniejsze i nie naprawia rzeczywistego rozmiaru.