Как сделать так, чтобы div ровно обтекал свое содержимое.

[IlyaSA]

Есть контейнер (.menu)(может там div и не нужен, а то я на них уже зациклен, заказчик хочет чтобы все, все, все было резиновым).

Если, содержание данного контейнера - блоки с фиксированной шириной, а у самого контейнера стоит display: inline-block, то все нормально.

Но, как только содержимому контейнера я даю в свойствах: float или display. Правая сторона отстреливает к границе окна браузера.

А требуют, чтобы отступы от содержимого были одинаковыми со всех сторон. (Первоначально я сделал через justify, но это решение не приняли. Сетка из элементов .post меняться не должна (в плане расстояния между элементами).)

 

Как можно сделать так, чтобы при динамическом содержимом, контейнер ровно обтекал содержимое?

 

Песочница:

http://cssdeck.com/labs/vplgkk7a

[Switch74]

а что вы пытаетесь сделать, как должно получиться? Какое содержимое контейнер должен обтекать? Вижу только содержимое самого контейнера.

[IlyaSA]

http://cssdeck.com/labs/otmdpewy

 

При добавлении float (или inline-block) к .post, правая граница контейнера (.menu) уходит к границе. А хочется, чтобы оставалась на расстоянии как в первом примере: 15 px.

[Switch74]

Если у вас .post имеет строгую ширину вам можно в CSS добавить @media для разных размеров окна браузера

добавьте в первый пример float и что-то вроде

@media all and (min-width: 352px){  .menu {    width:352px;  }}@media all and (min-width: 704px){  .menu {    width:704px;  }}

[IlyaSA]

Т.е., чтобы отображалось как мне бы хотелось, контейнер .menu должен иметь фиксированную ширину?

Как только ширина становится плавающей, правая граница "отскочит" (или левая, в зависимости от float)?

[Switch74]

да

[IlyaSA]

Хмм... Спасибо!

[mixan_nik]

http://cssdeck.com/labs/otmdpewy

 

 

Можно прописать ширину div.menu в js

var menu = document.getElementById("menu");var post = menu.getElementsByTagName("div");var width_post = post.item(0).clientWidth+32; // 32 - это margin-left+margin-right+border-left+border-right у тега div.postvar total = post.length;var width = document.body.clientWidth-50; // 50 - это margin-left у тега div.menuvar number = Math.floor(width/width_post);if (total > number) {    width_menu = number*width_post;  }else {    width_menu = total*width_post;  };document.getElementById('menu').style = 'width:'+width_menu+'px;';

И в коде дописать id:

<div id="menu" class="menu">

[vladmih]

А почему нельзя сделать как в бутстрапе? Ячейкам давать размерв в зависимости от колонок если три то 33.33%.
А в медиа запросы вешать размеры меньше если нужно.
Получится на большом экране будет показывать 3 отзыва в строку, и будут аккуратненько тянуться  на всю ширину

Сделаешь уже, экран, будет 2 в строку...

[Switch74]

можно по всякому, ТС выберет то, что ему больше понравится 

[IlyaSA]

Ага, ТС выбрал. =)

 

http://cssdeck.com/labs/smn2cncn

 

Сама функция totalWidht() работает, через alert() возвращает нужное значение ширины div.menu.

 

Но, блин, как ее прикрутить к HTML?

 

Пробовал через resize ():

$( "body" ).resize(function() {<!-- Тело функции -->>});

Через ready () или load (), совмещал эти методы, цепляться никак не хочет.

 

Что я не так делаю? В упор не вижу. =(

 

И, к сожалению, лезть в html  и добавлять id или вешать скрипт в атрибуты тэга я не могу. =(

[IlyaSA]

Вроде разобрался, все таки jQuery это не мое. Никак не могу понять его философии, то работает, то не работает.

 

Работоспособным оказался этот код:

$( document ).ready(function() {    $( window ).resize(function() {        totalWidht();    });});function totalWidht() {    var globalWight = $("body").width() + $(".menu").width() - $(".menu").outerWidth(true);    var postWight = $(".post").outerWidth(true);    var numberColumns = Math.floor(globalWight / postWight);    $(".menu").width( numberColumns * postWight );}

Причем, если я уберу var'ы, ну или хотя бы один из них (зачем мне их определять, если можно сразу все запихнуть в конечную формулу), то все! Уже не работает, ну почему так?

[Switch74]

а как вы все это в формулу запихиваете и что он вам показывает если например alert вывести?

[IlyaSA]

 

 

а как вы все это в формулу запихиваете и что он вам показывает если например alert вывести?

Не совсем понял.

Это к 11-му сообщению?

alert просто использовал для проверки работоспособности скрипта, запихивая его (и ему) в разные части этого самого скрипта.

 

Что именно запихиваю в формулу?

Просто беру и запихиваю. =)

 

Работает, как я и хотел (при изменении окна броузера):

http://cssdeck.com/labs/9v3lbyfr