Термоусадочная упаковка и центр контейнера для встроенных блоков

Ответ 1

Подумав немного об этом, я согласен с комментарием Wex выше.

Итак, я искал решение JavaScript (jQuery) - я не эксперт в этом, поэтому код может быть улучшен, но я думаю, он делает именно то, что вам нужно:

var resizeContainer = function () {
    var w_window = $(window).width();
    var w_block = $('.inlineblock').width();
    if (w_window < w_block * 3 && w_window >= w_block * 2) {
        $('.container').width(w_block * 2);
    } else if (w_window < w_block * 2) {
        $('.container').width(w_block);
    }  else {
        $('.container').width(w_block * 3);
    } 
};


$(document).ready(resizeContainer);
$(window).resize(resizeContainer);

body {
    text-align:center;
}
.container {
    display: inline-block;
    background-color: #aaa;
    text-align:left;
}
.inlineblock {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #eee;
}

<div class='container'>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
</div>

Ответ 2

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

Майк М. Линь ответ - очень изобретательный метод, я люблю творчество, но есть некоторые ошибки, с которыми я могу расширить.

ПРИМЕЧАНИЕ. Если кто-либо узнает общее решение, сообщите нам об этом, поскольку это не сделано. Etsy, Amazon, Redbubble, не могут видеть, что это достигается где-то...

1)

Вам не нужно "2 минус длина массива элементов div", это может стать дорогостоящим вычислительным для большого количества элементов. Скорее, в качестве приблизительного правила вам нужно заполнить "блоки" заполнителя для создания новой строки в контейнере. Фактически, число заполнителей (в псевдокоде):

let n = number of block items to display
let n_max = number of block items that fit into one row
let n_ph = number of "placeholder" block items

/*if number of items exceeds max number for a row (starts a new line), then 
 you'll need to start another line with n_max - 1 placeholders*/
if n >= n_max then
    n_ph = n_max - 1
end if

//you don't need any placeholders if number of items fills all rows completely
if n % n_max == 0 then
    n_ph = 0
end if

Обратите внимание, что я пропустил случай, когда n < n_max. Это сложно, и вам придется играть со своими значениями n_ph, когда n < n_max. Если вам нужно, чтобы n_ph работал для разных размеров окна, я бы подумал о добавлении наблюдателя ширины окна и добавлении или снятии заполнителя для ваших "чувствительных" диапазонов ширины. Это боль, но вы, скорее всего, не будете иметь n < n_max, или ваш n_max невелик, и это не больно для "ручного taylor" n_ph для чувствительных групп.

2)

Вам не нужен контейнер inline-block. Он работает с ним или без него, я нашел.

Ответ 3

Вы можете добавить невидимые заполнители в конец ваших встроенных блоков. Это приведет к выровнению левой строки последней строки.

http://jsfiddle.net/aakt65x4/

Однако, если вы не заполните первую строку, все это будет выглядеть по-левой.

HTML:

<!--
  Centers a group of boxes that wrap to the width of its container.
  Also left-aligns them inside the container.
  Issue: Does not center group if there aren't enough boxes to fill
  the first row.
  -->
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>

    <!--
      How many placeholders do you need?
      At least the number of blocks minus two.
      -->
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
</div>

CSS

body {
    text-align: center;     /* center a max-width container */
    font-size: 0;           /* remove spaces between blocks */
}
.container {                /* you don't need this */
    background-color: #eee; /* so you can see what happening */
    max-width: 960px;       /* to demonstrate the centering of a max-width container */
    display: inline-block;  /* center the max-width container */
    text-align: center;     /* center the group of blocks */
}
.block {
    display: inline-block;  /* left-align within the group */
    background-color: red;  /* so you can see what happening */
    height: 100px;
    width: 100px;
    margin: 10px;
}
.placeholder {
    display: inline-block;  /* add to the line of blocks */
    width: 120px;           /* width + margin of a block */
}