Wie man leeren Raum auf der rechten Seite eines Behälters mit sich hin- und herbewegenden Einzelteilen loswird?

Wenn ich itens in einem Container, wie verwenden Floating:Wie man leeren Raum auf der rechten Seite eines Behälters mit sich hin- und herbewegenden Einzelteilen loswird?

Der Code (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>

... wenn ich die Größe des Fensters, ich sehe, dass die width: auto des Containers ist nicht genau die Breite des Inhalts:

Auf der rechten Seite befindet sich ein leerer Bereich. Gibt es eine Möglichkeit, dass der Container wirklich die Breite der schwebenden Kinder hat, auch wenn ich die Größe verändere?

Quelle

2016-04-07 Tom Brito

Versuchen Sie, die Antwort auf diese Frage (http://stackoverflow.com/questions/18482505/having-the-floating-children-elements-determine-parent-width) aber ich denke, dass Sie kämpfen werden, wenn Sie mehr Elemente haben, damit sie sich wickeln ... – Stuart

Wenn Sie Bootstrap dann verwenden, wird es einfach sein, oder Sie können eine jquery Funktion dafür machen. –

Grundsätzlich ... nein. So funktioniert das Line-Box-Modell nicht. –

Sie können flexbox-Regeln verwenden. (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; 
}

Quelle

2016-04-07 16:17:38

Nein ... nicht wirklich du kannst nicht ... sogar Flexbox kann das nicht tun. Es ist nicht das, wonach das OP sucht. –

Das wird die Boxen im Raum verteilen, aber ich möchte den Container wirklich klein machen, um ihn an die Inhaltsgröße anzupassen. Wie auch immer, interessant über diese Eigenschaft zu wissen ... :) –

Wenn jQuery eine Option ist, würde ich so etwas tun;

$('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'); 
});

// ungetestete Code Warnung

Quelle

2016-04-07 16:24:49 Failwyn

Wie man leeren Raum auf der rechten Seite eines Behälters mit sich hin- und herbewegenden Einzelteilen loswird?

Antwort

Verwandte Themen