0

Добрый день!

В резиновой вёрстке есть список из 6 элементов, расположенных в линию. Как сделать так, чтобы при растягивании элементы распределялись по ширине пропорционально? (Самый левый оставался всегда слева, самый правый в правой части, а те, что посередине, пропорционально растягивались). Есть идеи, как это сделать? Не все элементы имеют одинаковую ширину.

2
  • Таблицей пробовали?
    – ling
    19 мар 2012 в 8:53
  • или display: table-cell 15 июн 2015 в 10:35

3 ответа 3

1

можно так:

ul {
    width: 100%;
    float: left;
    margin: 0px;
    padding: 0px;
    list-style: none;
}
li {
    width: 15%;
    float: left;
    margin-left: 2%;
        text-align: center;
}
li:first-child {
    margin-left: 0;
}
0

Скриптом. Посчитать сумму ширин всех элементов, вычесть её из общей ширины, на которую они должны растянуться, поделить на количество интервалов между элементами, и задать левый маргин для всех элементов, кроме первого.

Примерно так:

var totalWidth = 0;
$("li").each(function(){ totalWidth+=$(this).outerWidth() })
$("li+li").css({"martin-left": ($("ul").width()-totalWidth)/($("li").size()-1)})
0

А можно сделать таблицей.

1
  • или для li убрать float и указать display: table-cell
    – iurii_n
    20 мар 2012 в 10:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.