Оправьте divs с CSS, чтобы заполнить ширину родительского контейнера

У меня есть страница с шириной контейнера 100%, поэтому вся ширина экрана, у меня есть несколько DIVs в структуре сетки, у всех их есть float: слева на них и нет установленной ширины, только поле 10px.

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

Ответы

Ответ 1

Отметьте тридцать ответов в этом потоке для чистого CSS/HTML-решения без JavaScript, который работает во всех браузерах , включая IE 6.

Ширина жидкости с равноотстоящими DIVs

http://jsfiddle.net/thirtydot/EDp8R/

HTML:

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <span class="stretch"></span>
</div>​

CSS

#container {
    border: 2px dashed #444;
    height: 125px;

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

    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3, .box4 {
    width: 150px;
    height: 125px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.box1, .box3 {
    background: #ccc
}
.box2, .box4 {
    background: #0ff
}

Ответ 2

Использование CSS3 теперь очень просто.

UPDATE

Добавлена ​​поддержка MS IE (верьте в это или нет...). Я не очень уверен в вещах FF, потому что Mozilla что-то изменила. У меня не так много времени. Так что, если кто-то может меня исправить...

ОБНОВЛЕНИЕ II

Перемещенный код в фрагмент

.container {
  border: 1px solid black;
  display: -webkit-box;
  -webkit-box-pack: justify;
  -webkit-box-align: center;
  display: -moz-box;
  -moz-box-pack: justify;
  -moz-box-align: center;
  display: -ms-flexbox;
  -ms-flex-pack: justify;
  -ms-flex-align: center;
  display: box;
  box-pack: justify;
  box-align: center;
}
.child {
  background-color: red;
}
<div class="container">
  <div class="child">
    Some Content
  </div>
  <div class="child">
    Some Content
  </div>
  <div class="child">
    Some Content
  </div>
</div>

Ответ 3

Вы можете сделать это с помощью CSS, если указать все размеры в процентах (например, ширина, маржа, отступы).

Или, если вам нужен определенный запас или отступ, вы можете использовать jQuery

$(window).resize(function() {
  var $columns = $('.column'),
      numberOfColumns = $columns.length,               
      marginAndPadding = 0,
      newColumnWidth = ($('#container').width() / numberOfColumns) - marginAndPadding,
      newColumnWidthString = newColumnWidth.toString() + "px";

  $columns.css('width', newColumnWidthString);
}).resize();