Vraag Rechtvaardigen divs links in ouder


Ik heb de volgende vereiste. enter image description here

De groen gekleurde bovenliggende breedte varieert afhankelijk van de breedte van het apparaat. Ik heb alle vakjes nodig om in het midden van de ouder te staan.

Ik heb de volgende dingen al geprobeerd, maar het hielp mij niet.

Trial 1
Parent {text-align:center} box {display:inline-block}.

Dit resulteerde in de volgende uitvoer
First trial result 

Trial 2
Parent {text-align:center} box{float:left}.

Dit resulteerde in de volgende uitvoer

Second trial result 

Proef 3
Parent {display:flex} box -> justify-around & justify-between werkte ook niet.

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}
<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Alle hulp hierover wordt op prijs gesteld.


15
2017-12-14 12:23


oorsprong


antwoorden:


Zonder Javascript is dit erg moeilijk met dobber en / of inline-block.

Flexbox biedt enige hoop, maar zelfs dan wat creativiteit Is benodigd.

In essentie, op voorwaarde dat het maximale aantal elementen "per rij" bekend is, kunt u een vereist aantal onzichtbare elementen creëren dat kan worden gebruikt in combinatie met justify-content:center om het gewenste uiterlijk van de lijn te bereiken door de inhoud van de laatste regel in wezen naar links terug te schuiven.

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  text-align: center;
  border: 1px solid grey;
  width: 80%;
  max-width: 800px;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;
}
.balancer {
  height: 0;
  width: 100px;
  margin: 0 10px;
  visibility: hidden;
}
<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>

</div>


3
2017-12-14 12:54



Heb het werken met behulp van jQuery en toevoegen van een #wrapper.

Het enige dat u hoeft te doen, is berekenen hoeveel items op één rij passen. Vervolgens stelt u de wrapper in op de exacte breedte die nodig is om in deze items te passen.

Ik hoopte dat het in pure CSS gedaan zou kunnen worden, maar voor zover ik weet is er geen Math.floor() equivalent voor CSS.

Voorbeeld:

function fitItemsOnRow() {
  var windowWidth = $(window).width();
  var itemWidth = $(".item").outerWidth(true);
  var itemAmount = Math.floor((windowWidth / itemWidth));
  
  if(itemAmount > $(".item").length) {
    /* Set the maximum amount of items */
    itemAmount = $(".item").length;
  }
  
  var rowWidth = itemWidth * itemAmount;
  $("#wrapper").width(rowWidth);
}

$(window).resize(function() {
  /* Responsive */
  fitItemsOnRow();
});

$(document).ready(function() {
  fitItemsOnRow();
});
body {
  margin: 0px;
}
#parent {
  background: #75DB3C;
  min-width: 100vw; 
  min-height: 100vh;
  text-align: center;
}
#wrapper {
  display: inline-block;
  text-align: left;
  font-size: 0px; /* Removes default margin */
}
.item {
  display: inline-block;
  margin: 12px;
  width: 100px;
  height: 100px;
  background: #0B56A9;
}
<div id="parent">
  <div id="wrapper">
    <!-- A wrapper is necessary to center the items -->
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


2
2017-12-14 13:08



Je kunt dit doen met css selector "nth-of-type (n)"

    <div class="parent">
<div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

en css hier

.parent
    {
        display: block;
        width: 980px;
        padding: 10px 50px;
        background: green;
        box-sizing: border-box;
    }

        .parent::after
        {
            content: '';
            display: block;
            clear: both;
        }

    .item
    {
        float: left;
        width: 24%;
        margin-right: 1.25%;
        margin-bottom: 1.25%;
        /*
            note
            you may need min height , height or overflow:hidden

            */
    }

        .item:nth-of-type(4n)
        {
            float: right;
            margin-right: 0;
        }

0
2017-12-14 12:56