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

Когда я использую плавающие itens внутри контейнера, как:Как избавиться от пустого пространства справа от контейнера с плавающими элементами?

Кодекс (http://jsfiddle.net/tombrito/gx7kL330/7/):

.container { 
 
    background: blue; 
 
    position: absolute; 
 
    width: auto; 
 
} 
 
.floating-box { 
 
    float: left; 
 
    width: 150px; 
 
    height: 75px; 
 
    margin: 10px; 
 
    border: 3px solid #73AD21; 
 
}

<div class="container"> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
</div>

... если я изменить размер окна, я вижу, что width: auto контейнера не соответствует ширине содержимого:

Справа находится пустое пространство. Есть ли способ сделать контейнер действительно шириной плавающих детей, даже когда я изменяю его размер?

источник

2016-04-07 Tom Brito

Попробуйте ответить на этот вопрос (http://stackoverflow.com/questions/18482505/having-the-floating-children-elements-determine-parent-width) но я думаю, вы будете бороться, если у вас будет больше элементов, чтобы они обертывали ... – Stuart

, если вы используете bootstrap, тогда это будет легко, или вы можете сделать для него функцию jquery. –

В принципе ... нет. Это не так, как работает модель линейной коробки. –

Вы можете использовать правила flexbox. (source)

HTML:

<ul class="flex-container"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
    <li class="flex-item">6</li> 
</ul>

CSS:

.flex-container { 
    padding: 0; 
    margin: 0; 
    list-style: none; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
} 

.flex-item { 
    background: red; 
    padding: 5px; 
    width: 200px; 
    height: 150px; 
    margin-top: 10px; 
    line-height: 150px; 
}

источник

2016-04-07 16:17:38

Нет ... на самом деле вы не можете ... даже flexbox не может этого сделать. Это не то, что ищет ОП. –

Это будет распространять ящики в пространстве, но я действительно хотел бы сделать контейнер маленьким, чтобы он соответствовал размеру содержимого. Во всяком случае, интересно узнать об этом свойстве ... :) –

Если JQuery вариант, я хотел бы сделать что-то вроде этого;

$('body').on('resize', function() { 
    var width = document.documentElement.clientWidth || window.innerWidth, 
     itemWidth = 150 + 20 + 6; //width + margin + border, 
     count = Math.floor(width/itemWidth), 
     containerWidth = itemWidth * count; 

    $('.container').css('width', containerWidth + 'px'); 
});

// непроверенный код предупреждения

источник

2016-04-07 16:24:49 Failwyn

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

ответ

Смежные вопросы