Как мне структурировать мой HTML, чтобы отдавать приоритет определенной ширине div'ов над другим div?

Question

Мне нужно создать следующий макет:

+--------+----------------------------------+-----------+
|  fixed |  variable         | variable     |   fixed   |
|  width |   width - p2      |  width - p1  |   width   |
+--------+-------------------+--------------+-----------+

Где два средних поля с их переменной шириной имеют приоритет p1> p2. Содержимое в этих двух полях никогда не приведет к двум строкам текста (по вертикали), так как в поле p2 будет использоваться elipsis, когда текст слишком широк для рамки.

Больше примеров искусства ascii!

+--------+----------------------------------+-----------+
| <img/> | A person @ A Location     |Today |   Accept  |
+--------+----------------------------------+-----------+

+--------+----------------------------------+-----------+
| <img/> | A person @ A Location w...|Today |   Accept  |
+--------+----------------------------------+-----------+

+--------+----------------------------------+-----------+
| <img/> | A person @ A ...|Yesterday @ 3pm |   Accept  |
+--------+----------------------------------+-----------+

Таким образом, вы увидите, что поле «p2» увеличивается (будет максимальная ширина), а поле «p1» сжимается, чтобы соответствовать увеличению ширины.

Мне бы очень хотелось, чтобы разрешенные размеры CSS были выражены в виде уравнений с использованием обхода jquery-esque и селекторов css! т.е.

.style {
   width: $(this).parent.width - $('other_div).width ;
}

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

Приветствия

1018 * микрофон *

ОБНОВЛЕНИЕ В идеале я бы хотел, чтобы это не требовало никакого JavaScript.

Answer 1

Используется только CSS.Классы не используются, и только там, чтобы соответствовать вопросу.

    <div class="row">
        <span class="col1">...</span>
        <span style="display: inline-block; position: relative; width: 400px;">
            <span class="col2" style="display: inline-block; width: 400px; overflow: hidden;">123456789012345678901234567890123456789012345678901234567890</span>
            <span class="col3" style="display: inline-block; position: absolute; top: 0px; right: 0px; background-color: #fff;">Higher priority text.</span>
        </span>
        <span class="col4">...</span>
    </div>

Это не меняет размер col2, но будет рисовать поверх него, поэтому он не может быть идеальным.Кроме того, это может потребоваться между каждой строкой.

Answer 2

вы можете записать ширину непосредственно в элементы с помощью jquery, как описано в MattMS, или я бы также порекомендовал изучить less css , процессор css, который позволяет вам использовать переменные и выполнять подобные операции напрямуюв ваших таблицах стилей.

Answer 3

Это то, что вы преследовали?

        <script type="text/javascript">
$(document).ready(function() {
    $(".col2").each(function () {
        $(this).width($(this).parent().width() - $(this).next().width() - 10);
    });
});
        </script>
        <div class="row">
            <span class="col1">...</span>
            <span style="display: inline-block; width: 400px;">
                <span class="col2" style="display: inline-block; overflow: hidden;">123456789012345678901234567890123456789012345678901234567890</span>
                <span class="col3">Higher priority text.</span>
            </span>
            <span class="col4">...</span>
        </div>

Единственный необходимый класс - это "col2", я добавил только остальные, чтобы попытаться ответить на ваш вопрос. Дополнительные 10 пикселей, которые я снимаю с ширины, предназначены для того, чтобы справиться с расстоянием между двумя центральными промежутками, отрегулируйте по своему усмотрению.