с автоматической настройкой 2 деления в зависимости от содержимого

Question

Мне нужно написать CSS для настройки двух столбцов div, содержащихся в фиксированном размере div

<div style="width:500px">
<div id="description" class="col1">
</div>
<div id="price" class="col2">
</div>
</div>

.col1
{
float: left;
clear: left;
}
.col2
{
text-align: right;
float: right;
max-width: 150px; 
}

Я установил максимальную ширину для col2 и хочу следующее поведение.

• содержимое col1 является переменным, а также содержимое col2.
• если содержание col2 меньше 150 пикселей в ширину, col1 должен занять оставшееся место.
• , если содержание col2 превышает 150 пикселей ширины, col2 будет ограничено шириной 150 пикселей, а col1 - 350 пикселей.

Проблема в том, что ширина содержимого столбца col1 превышает доступное пространство, столбец col1 будет занимать всю ширину контейнера (500 пикселей). и col2 будет смещен вертикально после col1.

Answer 1

Сначала меня смутили ваши требования, но теперь, если посмотреть на это снова, это имеет смысл.

См .: http://jsfiddle.net/thirtydot/SJg4M/

HTML:

<div class="colContainer">
    <div id="price" class="col2">price</div>
    <div id="description" class="col1">description</div>
</div>

Как видите, мне пришлось поменять местами порядок #price и #description. Я надеюсь, что это приемлемо.

CSS:

.colContainer {
    width: 500px;
    overflow: hidden;
    background: #ccc
}
.col1 {
    overflow: hidden;
    background: #f0f
}
.col2 {
    text-align: right;
    float: right;
    max-width: 150px; 
    background: #999
}

Answer 2

Просто добавьте максимальную ширину для .col1. Если ваш контейнерный div равен 500px, тогда

Это лучшее, что я могу придумать, используйте javascript для установки ширины col1 равной разнице между контейнером 500px и шириной col2.

var width = 500 - $('#price').width();
$('#description').css('width', width+'px');

Пример: http://jsfiddle.net/JZLBN/

Answer 3

У меня нет решения Redy, однако моя идея заключается в том, чтобы поиграться с различными дисплеями: XX свойствами, например

  display: table-row

и т. Д.Я не проверял это, хотя, мне любопытно, если бы это помогло :) это не будет поддерживаться в IE7, поэтому, если вам это нужно, просто пропустите мое предложение.Это не реальный ответ, будем рады прочитать комментарии об этой идее.