Динамическая настройка двух внешних столбцов на переменную ширину центрального столбца

Question

Я бы считал себя промежуточным/продвинутым кодеком CSS/HTML, но я в тупике о том, как сделать следующий сценарий .. Я начинаю думать это невозможно, но я действительно хочу верить в это.

Скажем, ширина обертки 1000 пикселей.

Внутри него три колонны. Два внешних столбца имеют одинаковую ширину, эта ширина определяется центральным столбцом. Центральная колонка - единственная с содержимым, только одна строка текста с 30px отступов с обеих сторон. Таким образом, если строка содержимого составляет 100 пикселей с заполнением, то остальные два столбца будут (1000-100)/2 каждый ..

Есть ли динамический способ, чтобы два внешних столбца регулировали разную ширину центральной колонке, которая определяется ее изменяющимся содержимым, одной строкой текста?

Graphic, что я пытаюсь сделать:

Answer 1

Хорошо «OLE таблицы к спасению:

http://jsfiddle.net/hgwdT/

На самом деле я думаю, что таблицы дьявол, но это работает, как вы описали. И вот он использует display: table-cell на ребенка дивы, так что функционально то же самое, используя более хороший код:

http://jsfiddle.net/XXXdB/

Центр элемент действительно может иметь динамическую ширину; чтобы предотвратить скрещивание содержимого, я просто добавил white-space: nowrap к p, содержащему текст.

Я также подтвердил, что это решение работает в IE8 и FF, в дополнение к Chrome.

Answer 2

Самый близкий я мог придумать, чтобы использовать дисплей: стол; и table-cell. Это создает динамический эффект, который вы ищете, но я не думаю, что вы можете получить желаемый эффект, не устанавливая явную ширину для элемента центра.

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; 
} 

Вы можете check out my attempt here, он имеет несколько кнопок для вас, чтобы увидеть различные состояния, ширина вкл/выкл и добавить текст и т.д. (Jquery не имеет никакого отношения к решению)

Я думаю, что это так близко, как вы собираетесь получить с чистым CSS.

Answer 3

Это не самое элегантное решение, но оно работает. Я хотел пойти чистым CSS-маршрутом, но не мог понять. Хорошая работа, jblasco и Kyle Sevenoaks, об этом!

Адрес: jsFiddle demo.Если вы не возражаете, используя немного JavaScript, хотя (с использованием JQuery в моем примере):

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); 
}