Làm cách nào để ngăn các div này trùng lặp?

Question

Tôi có ba div, trong div nội dung.

Chiều rộng vùng chứa 70%. Trong đó tôi có -Left, rộng 20%. -Content, chiều rộng 60%. -Độ sáng, chiều rộng 20%.

Tôi muốn vùng chứa chiếm 70% chiều rộng của trang và các vùng bên trong (trái, nội dung và bên phải) chiếm 20%, 60% và 20% div vùng chứa.

Tôi đã thử các câu hỏi khác ở đây, tôi đã thử Google, nhưng dường như không thể tìm ra câu trả lời đúng. Xin hãy giúp tôi ngăn họ chồng lên nhau.

Nhưng khi tôi thay đổi kích thước trình duyệt, sự chồng chéo divs. Như thế này:

Dưới đây là các mã CSS liên quan:

#container{ 
    width: 70%; 
} 
#left { 
    float: left; 
    width: 20%; 
    min-width: 200px; 
} 
#content { 
    float: left; 
    width: 60%; 
    min-width: 600px; 
} 
#right { 
    float: right; 
    width: 20%; 
    min-width: 200px; 
} 

Answer 1

Chỉ cần xóa min-width khỏi CSS của bạn! Và cung cấp min-width cho vùng chứa với margin: auto để đặt trung tâm.

Hãy thử CSS này:

#container{ 
    width: 70%; 
    min-width: 1000px; 
    margin: auto; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

Check-out fiddle đây: http://jsfiddle.net/UaqU7/2/

Answer 2

Đi ra CSS min-width.

Khi chiều rộng cửa sổ thấp hơn một kích thước nhất định, các yếu tố đó không có lựa chọn nào khác ngoài chồng chéo. Giả sử cửa sổ của bạn là 1000px; thì vùng chứa sẽ là 700px. Nhưng với độ rộng tối thiểu, các div trong vùng chứa đã ở 1000px, làm tràn vùng chứa.

Answer 3

Bạn cần phải lấy ra min-width từ CSS của mình.

Khi trang có kích thước nhỏ hơn, số min-width ngăn không cho nó thu hẹp thêm nữa. Do đó gây ra sự chồng chéo.

Answer 4

Ở đây bạn đi, nếu bạn muốn có một chiều rộng tối thiểu, cài đặt nó trên thùng

http://jsfiddle.net/VBSYu/1/

#container{ 
    width: 70%; 
    min-width: 1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
}​ 

Answer 5

Thay vì tặng m trong chiều rộng của DIV của trẻ, bạn có thể đưa nó đến #container. Viết như thế này:

#container{ 
    width: 70%; 
    min-width:1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

Kiểm tra này http://jsfiddle.net/yLVsb/

Answer 6

Đây là fiddle nó làm việc tốt http://jsfiddle.net/r42hH/2/