Как сохранить ширину основного контейнера до максимальной ширины в расчете на 3 колонны жидкости?

Question

У меня 3-х слойная жидкость (ширина 100%). Мне нужно скрыть столбцы при щелчке, в то время как основной контейнер остается до максимальной ширины.

Представьте себе, что сильфон мой макет:

------------------------------------------------------- 
|   |        |   | 
| Col 1  | Main container (Col 2) | Col 3 | 
| (20%)  |  (60%)    | (20%) | 
|(or 100px) | This is a paragraph in which|(or 100px) | 
|   | some text is written.  |   | 
------------------------------------------------------- 

Если я нажимаю на Col 1, мне нужно иметь сильфон расположение:

------------------------------------------------------ 
|           |   | 
|  Main container (Col 2)   | Col 2 | 
|   (80%)       | (20%) | 
| This is a paragraph in which some text |(or 100px) | 
| is written.        |   | 
------------------------------------------------------ 

Тогда, если я нажму на Col 3, мне нужно имеют сильфон расположение:

------------------------------------------------------ 
|             | 
|     Main container (Col 2)    | 
|     (100%)       | 
| This is a paragraph in which some text is written. | 
|             | 
------------------------------------------------------ 

Как я могу писать стили CSS так, что mainContainer расширяется до максимального possibl e ширина?

Вот код, который я написал curenlty (который не то, что я точно хочу) enter link description here

Answer 1

для отображения div инлайн .... display:table бы полезно вместо float, а также расширяется, когда нет div вокруг

working demo

html, body { 
    width: 100%; 
} 
#columnContainer { 
    display:table; /* remove float and added this */ 
    width: 100%; 
    border: 1px dotted black; 
} 
#left { 
    display:table-cell; /* remove float and added this */ 
    min-width: 20%; 
    max-width: 100%;/* helps you expanding the divs after others collapse*/ 
    display:table-cell; 
    border: 1px solid blue; 
} 
#main { 
    display:table-cell; /* remove float and added this */ 
    min-width: 58%; 
    max-width: 100%; /* helps you expanding the divs after others collapse*/ 
    border: 1px solid green; 
} 
#right { 
    display:table-cell; /* remove float and added this */ 
    min-width: 20%; 
    max-width: 100%;/* helps you expanding the divs after others collapse*/ 
    border: 1px solid blue; 
} 

Убедитесь, чтобы дать max-width ... это будет решать, сколько div должен расширяться ......

Answer 2

Вы действительно должны посмотреть на модуль CSS3 Flexbox.

Ваш HTML структура:

<div class="container"> 
    <div class="col1"></div> 
    <div class="col2"></div> 
    <div class="col3"></div> 
</div> 

Ваш CSS:

.col1, .col2, .col3, .container { 
    display: flex; 
    flex-wrap: nowrap; 
} 
.col1 { 
    flex: 1 20%; 
} 
.col2 { 
    flex: 3 60%; 
} 
.col3 { 
    flex: 1 20%; 
} 

Полный пример работает на JSFiddle