CSS đặt chiều rộng để lấp đầy% diện tích còn lại

82

Xin lỗi vì tiêu đề hơi rác rưởi. Tôi không thể nghĩ làm thế nào để mô tả điều này tốt hơn.

Tôi đang cố gắng triển khai tiện ích thành viên Kết nối Bạn bè của Google trên trang web của mình, (vừa mới tham gia vào chương trình và muốn đưa nó vào mà không cần thiết kế lại lớn, ít nhất là để thử nghiệm).

Vấn đề của tôi như sau:

Tôi có một div vùng chứa có chiều rộng bằng 90% trang chính (nội dung). Bên trong cái này, tôi đang thả nổi một div ở bên phải và đặt chiều rộng của nó thành 300px và đặt tiện ích google bên trong nó. Những gì tôi muốn là có thể có một div lấp đầy 95% không gian còn lại ở bên trái div tiện ích google.

Tôi không biết liệu có thể trộn px và% với div và width hay không.

Tôi hy vọng điều này có ý nghĩa.

Cảm ơn

css

— Jon
nguồn

Liên quan stackoverflow.com/questions/4873832/…

— Adrien Be

70

Nó là. Bạn đang tìm kiếm một bố cục bán linh hoạt. Nhiệm vụ ban đầu là chén thánh của việc triển khai CSS ... Nhưng như bạn có thể thấy từ liên kết đó (họ đang làm 3 cột, 2 cố định nhưng rất dễ thay đổi), vấn đề còn lâu mới giải quyết được =)

— Oli
nguồn

Trông hoàn hảo. Cảm ơn bạn. Tôi sẽ có một chút điều này vào cuối tuần.

— Jon

44

Chính những bài báo như thế này đã khẳng định lại nỗi sợ của tôi rằng CSS còn xa mới là một công cụ tốt cho bố cục.

— s4y

11

@Sidnicious Là ai đó làm việc này [chuyển đổi thiết kế thành trang web] như công việc bánh mì và bơ của tôi, tôi có thể nói với bạn rằng nó tốt hơn nhiều so với bất kỳ thứ gì khác trước đây hoặc đã được đề xuất kể từ đó. Nó không hoàn hảo và bạn cần biết nó hoạt động như thế nào ... Nhưng một khi bạn đã làm, nó thật đơn giản.

— Oli

nhưng nếu bạn muốn thay đổi chiều rộng của một cột thì bạn phải chỉnh sửa các giá trị ở khắp nơi. Có một khái niệm khó chịu là "nếu nó hoạt động, đừng đụng đến nó bằng mọi giá, và xin đừng chỉ trích nó", nhưng bố cục có thể dễ dàng hơn rất nhiều. nếu bạn chỉ trộn% và px và tham chiếu đến các giá trị khác, mọi thứ sẽ đơn giản hơn rất nhiều.

— Jonathan.

1

@Jonathan. Không còn nghi ngờ gì nữa, điều này là đúng - các biến trực tiếp và số học trong CSS sẽ giúp mọi thứ dễ dàng hơn rất nhiều nhưng chúng tôi không có điều đó. Nếu bạn muốn phá vỡ độ dẻo, hãy xem LESS / SASS / etc. Chúng là một nửa giải pháp.

— Oli

0

Tôi cũng đã thực hiện một thử nghiệm nhanh sau khi xem xét một số giải pháp tiềm năng ở khắp nơi. Những gì tôi đang cố gắng làm là có sự kết hợp giữa các hàng và cột linh hoạt và cố định.

Đây là những gì tôi đã kết thúc với:

http://jsbin.com/hapelawake

— Anthony Tambrin
nguồn

0

Nếu bạn muốn tránh các float và clearfix, hãy sử dụng bố cục flex.

.main {
  display: flex;
  width: 90%;
}
.col1 {
  flex-grow: 1;
}
.col2 {
  width: 300px;
  margin-left: 5%;
}

<div class="main">
  <div class="col1" style="background: #518cf3;">Left column</div>
  <div class="col2" style="background: #94d0bb;">Right column</div>
</div>

Mở rộng đoạn mã

Lưu ý: Thêm tiền tố nhà cung cấp linh hoạt nếu trình duyệt được hỗ trợ của bạn yêu cầu .

— Reggie Pinkham
nguồn

-1

Bạn cần tạo một thuật toán bằng jQuery hoặc JS để kiểm tra không gian còn lại và đặt động chiều rộng của phần tử "phần còn lại", trên mỗi bản dựng đáp ứng. Nếu bản dựng không đáp ứng, bạn có thể kiểm tra và đặt chiều rộng phần tử bằng cách thực hiện các phép tính toán học đơn giản.

Chúng tôi đã gặp phải các vấn đề tương tự trong khi xây dựng hệ thống truyền thông dựa trên lưới đáp ứng chất lỏng.

— BasisInteractive
nguồn