Làm cho chiều rộng phần tử giãn ra để phù hợp với con của nó khi phụ huynh của phần tử tràn: tự động;

Question

Trong ví dụ đơn giản này, tôi có một tủ sách với sách nằm trên giá sách. Tủ sách là phần tử ngoài cùng với chiều rộng được xác định. Sách trên kệ sách được cho là xuất hiện từ trái sang phải mà không cần gói. Kệ sách được cho là để kéo dài chiều rộng của nó để hiển thị tất cả các cuốn sách trên kệ của nó. Tất cả giá sách cần phải có cùng chiều rộng, chiều rộng của giá sách rộng nhất.

HTML của tôi:

<div class="bookcase"> 
    <div class="bookshelf"> 
     <div class="book"> 
     <div class="book"> 
     <div class="book"> 
    </div> 
    <div class="bookshelf"> 
     <div class="book"> 
     <div class="book"> 
     <div class="book"> 
     <div class="book"> 
    </div> 
    <div class="bookshelf"> 
     <div class="book"> 
    </div> 
</div> 

CSS của tôi:

.bookcase { 
    width: 40%; 
    height: 300px; 
    margin: 0 auto; 
    background: lightgrey; 
    overflow-x: auto; 
} 
.bookshelf { 
    background: lightgreen; 
    white-space: nowrap; 
} 
.book { 
    display: inline-block; 
    height: 60px; 
    width: 60px; 
    background: pink; 
} 

jsFiddle demo

Vấn đề với mã PIN hiện tại là khi chiều rộng tủ sách là nhỏ hơn so với kệ sách dài nhất và tủ sách làm cho quá tải có thể cuộn được, các yếu tố giá sách không căng ra để phù hợp với tất cả các sách. Hiện tại các kệ có vẻ như đang xác định chiều rộng của chúng bằng với giá gốc, giá sách.

Những hình ảnh này minh họa sự cố. Đây là cách tủ sách trông bình thường, mà là tốt:

hoặc

Nhưng khi bạn di chuyển sang phải khi tủ sách hẹp, nền màu xanh lá cây của các kệ sách bị cắt, thay vì đạt đến phía bên phải của sổ đỏ lần cuối:

làm thế nào tôi có thể làm cho giá sách lấy toàn bộ chiều rộng của phần tử tràn, chứ không phải là chiều rộng của vùng chứa mẹ tủ sách?

Answer 1

Nhờ có Javalsu, Hashem Qolami và Danield để giúp tôi tìm ra giải pháp phù hợp. Thật vậy, mẹo là sử dụng các thuộc tính hiển thị vốn có của các bảng. Các giải pháp tôi tìm thấy là để bọc .bookcase trong một yếu tố khác (tôi gọi đây là yếu tố wrapper .wall). Di chuyển overflow: auto; bằng các thuộc tính tĩnh height: và width: từ .bookcase tới .wall và thêm display: table; và width: 100%; vào .bookcase.

Thuộc tính display: table; là cần thiết khi cuộn quá tải và cần width: 100%; khi quá trình cuộn không cuộn.

My New HTML:

<div class="wall"> 
    <div class="bookcase"> 
     <div class="bookshelf"> 
      <div class="book"></div> 
      <div class="book"></div> 
      <div class="book"></div> 
     </div> 
     <div class="bookshelf"> 
      <div class="book"></div> 
      <div class="book"></div> 
      <div class="book"></div> 
      <div class="book"></div> 
     </div> 
     <div class="bookshelf"> 
      <div class="book"></div> 
     </div> 
    </div> 
</div> 

CSS mới của tôi:

.wall { 
    width: 60%; 
    height: 300px; 
    margin: 0 auto; 
    background: lightgrey; 
    overflow: auto; 
} 
.bookcase { 
    display: table; 
    width: 100%; 
} 
.bookshelf { 
    background: lightgreen; 
    white-space: nowrap; 
} 
.book { 
    display: inline-block; 
    height: 60px; 
    width: 60px; 
    background: pink; 
} 

jsFiddle demo

Kết quả:
hoặc

Answer 2

Thêm display:table trên phần tử .bookcase không gần như những gì bạn cần.

FIDDLE

Sự khác biệt duy nhất là thay vì các thanh cuộn xuất hiện khi dài nhất kệ sách> 60% chiều rộng khung nhìn, chúng xuất hiện khi dài nhất kệ sách> 100% chiều rộng khung nhìn.

Nhưng vấn đề với nền biến mất đã biến mất.

Answer 3

vấn đề của bạn là bạn đã khai báo chiều rộng trên .bookcase và mỗi giá sách sẽ kế thừa chiều rộng đó. Nếu bạn muốn tủ sách và mỗi giá sách luôn là chiều rộng của hàng sách rộng nhất, hãy đặt hiển thị: chặn nội dòng trên .bookcase và xóa quy tắc chiều rộng của sách. Nếu bạn cần nó trung tâm, bạn sẽ cần phải tìm một cách khác hơn lề: 0 tự động.