CSS điền chiều rộng còn lại

Question

Tôi có thanh tiêu đề này.

<div id="header"> 
     <div class="container"> 
      <img src="img/logo.png"/> 
      <div id="searchBar"> 
       <input type="text" /> 
      </div> 
      <div class="buttonsHolder"> 
       <div class="button orange inline" id="myAccount"> 
        My Account 
       </div> 
       <div class="button red inline" id="basket"> 
        Basket (2) 
       </div> 
      </div> 

     </div> 
    </div> 

Tôi cần thanh tìm kiếm để lấp đầy khoảng trống còn lại trong div. Làm thế nào tôi sẽ làm điều này?

Dưới đây là CSS của tôi

#header { 
    background-color: #323C3E; 
    width:100%; 
} 

.button { 
    padding:22px; 
} 


.orange { 
    background-color: #FF5A0B; 
} 

.red { 
    background-color: #FF0000; 
} 

.inline { 
    display:inline; 
} 

#searchBar { 
    background-color: #FFF2BC; 
} 

Answer 1

Bạn có thể nhận ra cách bố trí này sử dụng bảng tế bào CSS.

Sửa đổi HTML của bạn một chút như sau:

<div id="header"> 
    <div class="container"> 
     <div class="logoBar"> 
      <img src="http://placehold.it/50x40" /> 
     </div> 
     <div id="searchBar"> 
      <input type="text" /> 
     </div> 
     <div class="button orange" id="myAccount">My Account</div> 
     <div class="button red" id="basket">Basket (2)</div> 
    </div> 
</div> 

Chỉ cần loại bỏ các yếu tố bao bọc xung quanh hai .button yếu tố.

Áp dụng CSS sau đây:

#header { 
    background-color: #323C3E; 
    width:100%; 
} 
.container { 
    display: table; 
    width: 100%; 
} 
.logoBar, #searchBar, .button { 
    display: table-cell; 
    vertical-align: middle; 
    width: auto; 
} 
.logoBar img { 
    display: block; 
} 
#searchBar { 
    background-color: #FFF2BC; 
    width: 90%; 
    padding: 0 50px 0 10px; 
} 

#searchBar input { 
    width: 100%; 
} 

.button { 
    white-space: nowrap; 
    padding:22px; 
} 

Áp dụng display: table-.container và cung cấp cho nó 100% chiều rộng.

Đối với .logoBar, #searchBar, .button, áp dụng display: table-cell.

Đối với #searchBar, đặt chiều rộng thành 90%, buộc tất cả các phần tử khác tính toán chiều rộng thu nhỏ và thanh tìm kiếm sẽ mở rộng để lấp đầy phần còn lại của không gian.

Sử dụng căn chỉnh văn bản và căn chỉnh dọc trong các ô của bảng nếu cần.

Xem demo tại: http://jsfiddle.net/audetwebdesign/zWXQt/

Answer 2

Bao gồm hình ảnh của bạn trong searchBar div, nó sẽ làm nhiệm vụ cho bạn

<div id="searchBar"> 
    <img src="img/logo.png" />     
    <input type="text" /> 
</div> 

Answer 3

tôi có lẽ sẽ làm một cái gì đó dọc theo dòng của

<div id='search-logo-bar'><input type='text'/></div> 

với css

div#search-logo-bar { 
    padding-left:10%; 
    background:#333 url(logo.png) no-repeat left center; 
    background-size:10%; 
} 
input[type='text'] { 
    display:block; 
    width:100%; 
} 

DEMO

http://jsfiddle.net/5MHnt/

Answer 4

Tôi đã làm một thử nghiệm nhanh sau khi xem xét một số giải pháp tiềm năng ở khắp mọi nơi. Đây là những gì tôi đã kết thúc với:

http://jsbin.com/hapelawake

Answer 5

Sử dụng calc!

https://jsbin.com/wehixalome/edit?html,css,output

HTML:

<div class="left"> 
    100 px wide! 
    </div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right"> 
    Fills width! 
    </div> 

CSS:

.left { 
    display: inline-block; 
    width: 100px; 

    background: red; 
    color: white; 
} 
.right { 
    display: inline-block; 
    width: calc(100% - 100px); 

    background: blue; 
    color: white; 
} 

Cập nhật: Là một thay thế để không có khoảng trống giữa các divs bạn có thể đặt font-size: 0 trên các yếu tố bên ngoài.

Answer 6

Điều này có thể đạt được bằng cách gói hình ảnh và thanh tìm kiếm trong vùng chứa của riêng chúng và thả hình ảnh sang trái với chiều rộng cụ thể.

Điều này đưa hình ảnh ra khỏi "luồng" có nghĩa là bất kỳ mục nào được hiển thị trong luồng thông thường sẽ không điều chỉnh vị trí của chúng để tính đến điều này.

Để thực hiện tìm kiếm "trong dòng "Bar xuất hiện chính xác vị trí ở bên phải của hình ảnh, bạn đặt cho nó một đệm trái bằng với chiều rộng của hình ảnh cộng với máng xối.

Hiệu ứng là làm cho hình ảnh có chiều rộng cố định trong khi phần còn lại của khối vùng chứa được lấp đầy bởi thanh tìm kiếm.

<div class="container"> 
    <img src="img/logo.png"/> 
    <div id="searchBar"> 
    <input type="text" /> 
    </div> 
</div> 

và css

.container { 
    width: 100%; 
} 

.container img { 
    width: 50px; 
    float: left; 
} 

.searchBar { 
    padding-left: 60px; 
}