Wie wird der gleiche Abstand zwischen Inline-Blockelementen hinzugefügt?

Question

Ich möchte nicht automatisch füllen Raum mit Blöcken Inhalt. Ich möchte gleiche Abstände zwischen Blöcken mit fester Breite, das wäre auch flexibel.

Ich kann das tun, indem Sie padding-right: whatever; hinzufügen und dann einen weiteren padding-right: 0; zu .last Block hinzufügen, aber das ist sehr primitiv und nicht mobil freundlich.

Mein Code: https://jsfiddle.net/9twy5drd/1/

.container { 
 
    width: 100%; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    padding: 5px 0; 
 
} 
 
.container .block { 
 
    display: inline-block; 
 
    border: 1px solid green; 
 
    padding: 10px; 
 
} 
 

 
.container2 { 
 
    width: auto; 
 
    border: 1px solid red; 
 
    padding: 5px; 
 
} 
 
.container2 .block { 
 
    display: inline-block; 
 
    border: 1px solid green; 
 
    padding: 10px; 
 
    margin: 0 47px 0 0; 
 
} 
 
.container2 .block.last { 
 
    margin: 0; 
 
}

<div class="container"> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
</div> 
 

 
<p>What we want, but not with fixed method:</p> 
 

 
<div class="container2"> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
    <div class="block last">Some block</div> 
 
</div>

Answer 1

könnten Sie verwenden Flexbox und justify-content: space-between;

.container { 
 
    width: 100%; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    padding: 5px 0; 
 
} 
 
.container .block { 
 
    border: 1px solid green; 
 
    padding: 10px; 
 
}

<div class="container"> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
</div>

Hier ist js Lösung für ältere Browser, die Flexbox nicht unterstützen. Ich berechnete margin-left für jedes block Element, um gleichen Abstand zwischen Elementen zu schaffen. Auch Leerzeichen aus HTML müssen entfernt werden.

$(window).on("resize", function() { 
 
    var block = $('.container > .block'); 
 
    var count = block.length; 
 
    var bWidth = block.outerWidth(); 
 
    var pWidth = $('.container').innerWidth(); 
 

 
    var margin = (pWidth - (bWidth * count))/(count - 1); 
 

 
    if (margin > 0) block.not(':last').css('margin-right', margin); 
 
}).resize();

.container { 
 
    width: 100%; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    padding: 5px 0; 
 
} 
 
.container .block { 
 
    border: 1px solid green; 
 
    display: inline-block; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="block">Some block</div><div class="block">Some block</div><div class="block">Some block</div><div class="block">Some block</div> 
 
</div>

Answer 2

Einfach justify Ihre Behälter und vergessen Sie nicht text-align-last (Firefox 49 und höher werden Präfix nicht brauchen) zu verwenden

.container { 
 
    width: 100%; 
 
    border: 1px solid red; 
 
    text-align: justify; 
 
    -moz-text-align-last: justify; 
 
    text-align-last: justify; 
 
    padding: 5px; 
 
} 
 

 
.container .block { 
 
    display: inline-block; 
 
    border: 1px solid green; 
 
    padding: 10px; 
 
}

<div class="container"> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
    <div class="block">Some block</div> 
 
</div>