hai phần tử nội tuyến khối - không có dòng chảy khi thay đổi kích thước

Question

Tôi đang tìm cách tốt nhất để có nhiều cột bằng cách sử dụng khối nội tuyến. Mọi thứ hoạt động tốt trừ khi trình duyệt được thay đổi kích thước. Cột thứ hai sẽ được đẩy dưới cột đầu tiên như một cột mong đợi với khối nội tuyến. Tôi hiểu tại sao điều đó xảy ra, những gì tôi cần biết là nếu có một cách để tạo cuộn ngang thay vì đẩy cột thứ hai xuống. Tôi nghĩ tràn: ẩn sẽ làm việc, nhưng nó dường như không.

Tôi hiện không đặt bất kỳ độ rộng nào và muốn giữ điều này càng lỏng càng tốt.

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

col1 và col2 là khối nội tuyến không có chiều rộng và hiển thị cạnh nhau khi chế độ xem trình duyệt đủ rộng. Khi trình duyệt người dùng có kích thước nhỏ hơn, col2 hiển thị bên dưới col1. Tôi muốn họ luôn bên cạnh và có một cuộn ngang nếu cần.

Answer 1

Thêm white-space: nowrap vào phụ huynh của các thành phần có display: inline-block.

Answer 2

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

hoặc thử

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

Answer 3

Bạn có thể thử thiết min-width để div bên ngoài. Vì vậy, nó chỉ áp dụng khi cửa sổ nhỏ hơn và không sửa kích thước thực.