Как установить поля авто-полей в дизайне с гибкой шириной с помощью CSS?

Question

У меня есть DIV с гибкой шириной, например, min-width: 800px и max-width: 1400px.В этом DIV есть много блоков с фиксированной шириной 200 пикселей и дисплеем: inline-block.Таким образом, в зависимости от ширины родительского DIV, эти поля заполняют все пространство.

Моя проблема - пустое пространство справа, которое вызвано переменной шириной родительского div.Иногда это пустое пространство невелико и выглядит нормально, но при разной ширине родительского div это пустое пространство составляет почти 200 пикселей.

Не знаю, если я описал свою проблему достаточно подробно, я надеюсь, что этокартина поможет описать мою реальную ситуацию:

И вот что я хотел бы иметь:

ЭтоАвто-маржа может быть легко достигнута с помощью TABLE.Тем не менее, я не знаю точное количество столбцов, так как оно зависит от разрешения экрана пользователя.Поэтому я не могу использовать таблицу и скорее придерживаться CSS.

У кого-нибудь есть идеи, как решить эту проблему?Заранее благодарю за ваши комментарии и ответы.

РЕДАКТИРОВАТЬ: Мне не нужна поддержка IE6.Я хотел бы поддержать IE7, но IE7 не является обязательным, так как я знаю, что есть ограничения, поэтому я, вероятно, буду использовать фиксированную ширину «div.wrapper» в IE7

EDIT2 Мне нужно обрабатывать несколькостроки этих блоков, поэтому они не превышают поле «div.wrapper» и правильно переносятся в несколько строк блоков, а не только в одну длинную строку.

EDIT3 Я неНе знаю количество «столбцов», так как оно очень варьируется в зависимости от разрешения экрана пользователя.Таким образом, на большом экране может быть 7 блоков в одном ряду, а на маленьких экранах может быть только 4 блока в одном ряду.Поэтому мне нужно решение, которое не устанавливает фиксированное количество блоков в одном ряду.Вместо этого, когда ящики не помещаются в один ряд, они должны просто переноситься в следующий ряд.

Answer 1

Это настолько близко, насколько IE7-совместимый CSS может получить: http://jsfiddle.net/thirtydot/79mFr/

Если это все еще не так, пришло время взглянуть на использование JavaScript и, надеюсь, также на jQuery.Если вы правильно определите свои требования, это будет тривиально, чтобы сделать это идеально с JavaScript.

HTML:

<div id="container">
    <div></div>
    <div></div>
    ..
    <span class="stretch"></span>
</div>

CSS:

#container {
    border: 2px dashed #444;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    min-width: 800px;
    max-width: 1400px
}

#container > div {
    margin-top: 16px;
    border: 1px dashed #f0f;
    width: 200px;
    height: 200px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

---

Дополнительный span (.stretch) можно заменить на :after.

Этот по-прежнему работает во всех тех же браузерах, что ивышеуказанное решение.:after не работает в IE6 / 7, но они все равно используют distribute-all-lines, поэтому это не имеет значения.

См .: http://jsfiddle.net/thirtydot/79mFr/2/

Есть небольшой минус в :after: чтобы последняя строка отлично работала в Safari, вы должны быть осторожны с пробелами в HTML.

В частности, это не работает:

<div id="container">
    <div></div>
    <div></div>
</div>

И это делает:

<div id="container">
    <div></div>
    <div></div></div>

Answer 2

Вам нужно сделать .box встроенных блоков и выровнять текст в .wrapper..wraper:after необходимо для выравнивания последней строки.Старые IE не понимают after, но в IE text-align-last:center позаботится о последней строке.

.wrapper{
    text-align:justify;
    max-width:1400px;
    min-width:800px;
    text-align-last:center;
}
.wrapper:after{
    content:'';
    display:inline-block;
    width:100%;
    height:0;
    font-size:0;
    line-height:0;
}
.box{
    display:inline-block;
    *display:inline;
    vertical-align:top;
    width:200px;
    height:50px;
    background:red;
}

Вот jsfiddle .

Answer 3

Вы можете плавать их и просто применить оболочку к .box, что позволит вам margin:auto; .box относительно плавающей оболочки.

CSS:

div.wrapper {
    width:100%;
    border:3px solid red;
}
div.clear {
    clear:both;
}
div.box-wrapper {
    float:left;
    margin:10px 0;
    height:100px;
    width:20%;
}
div.box {
    border:1px solid black;
    width:80px;
    height:100px;
    margin:auto;
}

HTML:

<div class="wrapper">
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="clear"></div>
</div>

Демо: http://jsfiddle.net/2avwf/

Я не сделал их шириной 200 пикселей ради окна скрипки. Просто поменяйте width:80px на желаемую ширину.

Если вы хотите сделать это динамическим решением, в котором количество блоков в строке будет варьироваться от пользователя к пользователю в зависимости от их размера экрана и т. Д., Просто создайте 3 или 4 определяющих ширину класса упаковщика блоков:

.box-wrapper-25 {
    width:25%;
}
.box-wrapper-33 {
    width:33%;
}

Затем с помощью JQuery вы можете легко определить ширину .wrapper и назначить класс переопределения для упаковщиков блоков:

$('.box-wrapper').each(function(){
    $(this).removeClass().addClass('box-wrapper box-wrapper-25'); // only need 4 per row
});

Примерно так: http://jsfiddle.net/RcDky/

Answer 4

Попробуйте это:

div.wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    /* justify-content will give the auto margin you looking for
       it will place the auto margin only between each div.box
       make sure the div.wrapper has "display: flex;"
     */
}

div.box {
    display: inline-flex; /* inline-flex will make the boxes all in the same line */
    width: 200px; /* notice you don't need width to be a % for this to work */
    height: 100%;
    margin: auto; /* gives you the auto margin for the first and last box from the border of your wrapper */
}

Answer 5

довольно старый, но стоит попробовать, так как несколько строк и выравнивание текста: justify;в #container создает пробелы, когда в последней строке меньше делений.Я хотел, чтобы все осталось в порядке.Поэтому моя идея заключалась в том, чтобы использовать 2 оболочки.

<div class="wrapper">
    <div class="wrapper2">    
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="clear"></div>
    </div>
</div>

, а также переполнение: скрытый;в CSS

.wrapper {
    width:620px;
    border:3px solid red;
    margin:0 auto; overflow:hidden;
}
.wrapper2 {
    width:630px;
}
div.clear {
    clear:both;
}
.box {
    width:200px; background:#000; height:100px; margin-bottom:10px; float:left; overflow:hidden; margin-right:10px;
}

недостаток: поля не устанавливаются автоматически ...

DEMO: http://jsfiddle.net/hexagon13/2avwf/52/

Answer 6

В моем проекте я столкнулся с той же проблемой, и я пришел к следующему решению - лучший способ для меня - использовать js, в моем случае вы можете иметь количество ххх блоков внутри контейнера, если места достаточнов 1-м ряду блок из 2-го ряда поднимается до 1-го ряда и так далее.вот пример http://jsfiddle.net/gVAjN/11/

 $(function() {
  // Call function when DOM is ready
  settingsAlignment();

$(window).resize(function() {
      // Call function on window resize
        settingsAlignment();
    })

$('#new_div').click(function() {
    box_number = $('.element').size();
    box_add = box_number + 1;
    $('.container').append($('<div class="element">Box'+ box_add + '</div>'))
    settingsAlignment();
})

function settingsAlignment() {
// calculation of ul's padding-left and li's margin-right
var settingsUl = $('.container');
    settingsLi = $('.element');
    ul_width = settingsUl.outerWidth(true);
    item_width = settingsLi.width();
    min_gap = 7;
    effective_item_width = item_width + min_gap;
    items_in_row = Math.floor((ul_width - min_gap) / effective_item_width);
    gaps_sum = ul_width - items_in_row * item_width;
    new_gaps = gaps_sum / (items_in_row + 1);
    item_margin = Math.floor(new_gaps);
    row_width = (item_width + item_margin) * items_in_row - item_margin;
    console.log(row_width + '= row_width');
    console.log(ul_width + '= ul_width');
    ul_left_padding = Math.ceil((ul_width - row_width) / 2);
    console.log(ul_left_padding + '=ul_left_padding');
    settingsUl.css('padding-left', ul_left_padding + 'px');
    settingsLi.css('margin-right', item_margin + 'px');
  console.log(settingsLi);
 }
});

Answer 7

Я ответил на аналогичный вопрос здесь

Это возможно в чистом css3 с использованием media queries и процедуры css calc().

Из грубых это будет толькоработать на современных браузерах.IE9 +, Chrome, Firefox,

См. Это РАБОЧИЙ ДЕМО

Основная идея состоит в том, чтобы настроить медиазапрос для каждого из состояний #columns,где я затем использую calc () для определения поля справа для каждого из элементов (кроме элементов в последнем столбце).

Answer 8

Попробуйте это jsFiddle: http://jsfiddle.net/MKuxm/

Просто увеличьте и уменьшите окно, чтобы увеличить размер div, и вы увидите, что поле между красными прямоугольниками будет соответственно увеличено.Я знаю, что красные поля больше не имеют ширину 200 пикселей, но я боюсь, что это невозможно с чистым CSS, потому что вы не должны смешивать процентную ширину и фиксированную ширину пикселя.

HTML

<div>
     <span>TEXT</span>
     <span>TEXT</span> 
     <span>TEXT</span> 
     <span>TEXT</span> 
</div>

CSS

div {
    width: 95%;
}

span {
    float: left;
    background: red;
    width: 20%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}