Tự động điều chỉnh hai cột bên ngoài thành độ rộng biến của cột giữa

Question

Tôi tự coi mình là một trình mã hóa CSS/HTML trung gian/nâng cao nhưng tôi bị bối rối về cách thực hiện kịch bản sau .. Tôi bắt đầu nghĩ điều đó là không thể nhưng tôi thực sự muốn tin rằng đó là ..

Giả sử chiều rộng trình bao bọc là 1000px.

Trong đó có ba cột. Hai cột bên ngoài có cùng chiều rộng, chiều rộng này được cột trung tâm quyết định. Cột trung tâm là cột duy nhất có nội dung, chỉ một dòng văn bản có phần đệm là 30px ở hai bên. Vì vậy, nếu dòng nội dung là 100px với đệm, hơn hai cột khác sẽ là (1000-100)/2 mỗi ..

Có cách năng động để có hai cột bên ngoài điều chỉnh theo chiều rộng khác nhau của trung tâm cột được xác định bởi nội dung khác nhau của nó, một dòng văn bản?

đồ họa về những gì tôi đang cố gắng để hoàn thành:

Answer 1

Tốt 'bảng ole để giải cứu:

http://jsfiddle.net/hgwdT/

Thật sự tôi nghĩ bàn là ma quỷ, nhưng hoạt động này như bạn mô tả. Và như vậy ở đây nó được sử dụng display: table-cell trên các div con, vì vậy nó có chức năng tương tự sử dụng đánh dấu đẹp hơn:

http://jsfiddle.net/XXXdB/

Yếu tố trung tâm thực sự có thể có chiều rộng năng động; để ngăn nội dung không bị phân loại, tôi chỉ cần thêm white-space: nowrap vào số p chứa văn bản.

Tôi cũng xác nhận rằng giải pháp này hoạt động trong IE8 và FF, ngoài Chrome.

Answer 2

Các rất gần nhất tôi có thể đưa ra là sử dụng display: table; và ô bảng. Điều này tạo ra hiệu ứng động mà bạn đang tìm kiếm, nhưng tôi không nghĩ rằng bạn có thể có được hiệu ứng mong muốn của mình mà không đặt chiều rộng rõ ràng cho phần tử trung tâm.

HTML:

<div id="wrap"> 
    <div id="left"> 
     Left 
    </div> 
    <div id="center"> 
     center 
    </div> 
    <div id="right"> 
     Right 
    </div> 
</div> 

CSS:

#wrap 
{ 
    width: 1000px; 
    display: table; 
} 

#wrap div 
{ 
    display: table-cell; 
    border: 1px solid #000; 
    width: auto; 
} 

#center 
{ 
    padding: 0 30px; 
    text-align: center; 
} 

Bạn có thể check out my attempt here, nó có một số nút để bạn có thể xem các tiểu bang khác nhau, chiều rộng on/off và thêm văn bản vv (jQuery không liên quan gì đến giải pháp này)

Tôi nghĩ điều này gần giống như bạn sẽ nhận được với CSS thuần túy.

Answer 3

Đây không phải là giải pháp thanh lịch nhất, nhưng nó hoạt động. Tôi muốn đi đường CSS tinh khiết, nhưng không thể tìm ra được. Làm tốt lắm, jblasco và Kyle Sevenoaks, để tìm ra điều đó!

Đây là số jsFiddle demo của tôi.Nếu bạn không nhớ sử dụng một chút JavaScript dù (sử dụng jQuery trong ví dụ của tôi):

HTML:

<div id="wrapper"> 
    <div class="side"></div> 
    <div id="middle">One line of text.</div> 
    <div class="side"></div> 
</div> 

CSS:

#wrapper { 
    margin: 0 auto; 
    width: 1000px;  
} 

#wrapper div { 
    float: left; 
    height: 300px; 
} 

.side { 
    background: #ddd; 
} 

#middle { 
    background: #eee; 
    padding: 0 30px; 
    text-align: center; 
} 

JavaScript:

var adjustSize = function(){ 
    // Declare vars 
    var wrapper = $('#wrapper'), 
     middle = $('#middle'), 
     totalWidth = wrapper.width(), 
     middleWidth = middle.width(), 
     middleOuterWidth = middle.outerWidth(), 
     remainingWidth = totalWidth - middleOuterWidth, 
     sideWidth; 

    if(remainingWidth % 2 === 0){ 
     // Remaining width is even, divide by two 
     sideWidth = remainingWidth/2; 
    } else { 
     // Remaining width is odd, add 1 to middle to prevent a half pixel 
     middle.width(middleWidth+1); 
     sideWidth = (remainingWidth-1)/2; 
    } 

    // Adjust the side width 
    $('.side').width(sideWidth); 
}