Có thể cho phần tử chặn nội dòng tự động điền chiều rộng có sẵn không?

Question

Tôi có một số <div id="content"> chứa <div id="sub-navigation> và <div id="main container">, là các khối nội tuyến. Tôi muốn có thể làm cho main container lấp đầy phần còn lại của chiều rộng trang có sẵn. Điều đó có thể không?

Tôi cần columns-strip để mở rộng hoặc thu nhỏ dựa trên số lượng và chiều rộng của column yếu tố. Nếu chiều rộng của columns-strip vượt quá chiều rộng của main container thì thanh cuộn ngang sẽ xuất hiện.

CSS:

* { 
    margin: 0px; 
    padding: 0px; 
    font-size: 10pt; 
    white-space: normal; 
} 

#wrapper { 
    margin: 0px 20px; 
    background-color: red; 
} 

#header { 
    margin: 25px 10px 10px 10px; 
    height: 50px; 
    background-color: purple; 
    color: white; 
} 

#content { 
    margin: 10px; 
    padding: 10px; 
    font-size: 0pt; 
    white-space: nowrap; 
    overflow: hidden; 
    background-color: white; 
} 

#sub-navigation { 
    width: 200px; 
    height: 150px; 
    display: inline-block; 
    vertical-align: top; 
    background-color: forestgreen; 
    color: white; 
} 

#main-container { 
    padding: 10px; 
    display: inline-block; 
    overflow: auto; 
    background-color: yellow; 
} 

#columns-strip { 
    padding: 10px; 
    font-size: 0pt; 
    white-space: nowrap; 
    background-color: mediumturquoise; 
} 

.posts-column { 
    margin: 0px; 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
    vertical-align: top; 
    overflow: auto; 
} 

#footer { 
    margin: 10px 10px 25px 10px; 
    height: 50px; 
    background-color: navy; 
} 

HTML:

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="content">  
    <div id="sub-navigation"></div>  
    <div id="main-container"> 
     <div id="columns-strip">  
     <div class="posts-column" style="background-color: lightgray;"></div> 
     <div class="posts-column" style="background-color: darkgray;"></div> 
     <div class="posts-column" style="background-color: gray;"></div> 
     </div> 
    </div> 
    </div> 
    <div id="footer"></div> 
</div> 

Answer 1

Bạn phải xóa kiểu inline-block và thả nổi #sub-navigation div. inline-block không phù hợp với những gì bạn đang cố gắng đạt được. Khi bạn không thêm kiểu hiển thị, phần tử div sẽ là giá trị mặc định là block, block yếu tố chiếm toàn bộ không gian có sẵn theo mặc định. Bằng cách thả phần tử #sub-navigation bạn làm cho nó chỉ chiếm dung lượng cần thiết cho nội dung của nó.

#sub-navigation { 
    width: 200px; 
    height: 150px; 
    float : left; 
    vertical-align: top; 
    background-color: forestgreen; 
    color: white; 
} 

#main-container { 
    padding: 10px;   
    overflow: auto; 
    background-color: yellow; 
} 

hãy chắc chắn để thêm một yếu tố clear: left sau #main-container

Answer 2

Đó không phải là cách inline-block s có nghĩa vụ phải được sử dụng. Điều tốt nhất để làm ở đây là làm cho hộp điều hướng của bạn float:left và để giá trị mặc định display một mình.

Answer 3

Nếu header, footer và wrapper của bạn có độ rộng cụ thể, sau đó có, bạn có thể có chính-container của bạn lấp đầy không gian có sẵn. Nhưng nếu bạn không chỉ định chiều rộng trong CSS của mình, thì bạn cần phải xác định mức độ lớn của container chính của bạn có thể dựa trên chiều rộng kết xuất của phần tử chứa (trình bao bọc). Cách duy nhất để xác định chiều rộng đó sau khi tải trang là với javascript. Nếu bạn muốn trang web của mình có chiều rộng động nhưng vẫn có nội dung (điều hướng phụ và vùng chứa chính) lấp đầy màn hình, bạn cần sử dụng javascript hoặc phần trăm và tỷ lệ phần trăm có thể xấu khi bạn bắt đầu xem xét các độ phân giải khác nhau của màn hình, máy tính xách tay, v.v ...

Answer 4

Đã bao giờ nghe nói về mô hình hộp flex !!

Nó chỉ được thực hiện cho điều đó.

Lưu ý trong mô hình flexbox tất cả các phần tử con hoạt động như mô hình hộp flex, bạn không thể chọn không tham gia một số thứ nhất định. Điều đó có nghĩa là nếu trang có điều hướng và dưới nội dung div + div bên. Bạn không thể thực hiện điều hướng hàng đầu trong số đó. Điều này có ý nghĩa. Vì vậy, giải pháp là có tất cả mọi thứ chỉ cần hộp flex trong một div.