Нужно ли мне использовать JavaScript, чтобы получить столбцы ширины жидкости и столбцы статической ширины для совместного использования в одной строке? - PullRequest
Новая
       4

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

0 голосов
/ 09 сентября 2010

У меня есть переменное число элементов div, выступающих в качестве столбцов, и я хотел бы, чтобы их переменное число имело статическую ширину (в пикселях) и переменное число из них, чтобы расширить до оставшейся ширины в окне. Если я добавлю ширину столбцов жидкости к 100%, некоторые столбцы будут вытеснены из строки - нужно ли мне использовать javascript, чтобы вычесть ширину статических столбцов, чтобы определить долю столбцов жидкости в ширине окна, или есть атрибут css, который я могу использовать?

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

Вот пример того, что я имею в виду: 

<style>
    #ColumnContainer > div { display:inline-block }
</style>

<div id="ColumnContainer">
    <div style="width:200px"></div>
    <div class="FluidColumn"></div>
    <div class="FluidColumn"></div>
    <div style="width:100px"></div>
    <div class="FluidColumn"></div>
</div>

<script>
    /*
        Do i need to do this...

        1. get window width
        2. add the widths of all divs inside #ColumnContainer without the 'FluidColumn' class
        3. subtract the total static width from the window width
        4. divide this remaining width by the number of divs with the 'FluidColumn' class
        5. set the the width, in percentage, for the divs with the 'FluidColumn' class
    */
</script>

<style>
    // Or...

    .FluidColumn { width: ??? } // is there a special width attribute that works this out?
</style>

Ответы [ 2 ]

1 голос
/ 09 сентября 2010

Если кому-то интересно, вот сценарий, который я сделал. 

<script type="text/javascript">
    function vSetFluidColumnWidths() {
        var _iStaticColumnsWidth = 0;
        $("#ColumnGrid .StaticColumn").each(function(i) { _iStaticColumnsWidth += $(this).width(); });
        var _iFluidColmnWidth = ($("#ColumnGrid").width()-_iStaticColumnsWidth)/$("#ColumnGrid .FluidColumn").length;
        $("#ColumnGrid .FluidColumn").each(function(i) { $(this).width(_iFluidColmnWidth); });
    }
    $(document).ready(function() { vSetFluidColumnWidths(); });
    $(window).resize(function() { vSetFluidColumnWidths(); });
</script>
1 голос
/ 09 сентября 2010

Проблема со словом переменная , вы видите.Взгляните на эту статью здесь: http://www.alistapart.com/articles/holygrail/

То, что она описывает, относится к двум столбцам фиксированной ширины и одной ширине.Учитывая это, вы должны иметь возможность создать макет с таким количеством столбцов фиксированной и переменной ширины, как вы хотите.

Однако, всегда есть ограничения, и если вы используете слишком много столбцов, таблица стилей может запутаться.Почему бы вам не объяснить более подробно, что здесь означает строго переменная , чтобы мы могли помочь вам лучше?

Редактировать

В вашем случае ответ, безусловно, нет , вы должны использовать Javascript.Существуют и другие возможности, такие как динамическое создание стилей на стороне сервера или использование display: table, но я бы рекомендовал против любого из них.Они невероятно хлопотны и сложны в обслуживании.Использование Javascript здесь также дает вам больше гибкости в определении соотношения и ширины столбцов жидкости.

...