How to space children evenly horizontally in css


Tags: css

Problem :

desired effect

I have included the effect I want to achieve in the image.

The container div might change width to some extent. The children should have uniform gutters between them and each other and the left and right sides.

I noticed that margins combine. I'm not sure if there's a way to say "minimum-margin" or if there's a way to say "spread out".

One lucky thing is that there will be 6 child elements always. (Or n but it will be fixed)

I am using bootstrap in this case. I will investigate the row / column feature. But I'd rather not depend on it. I'd rather find a way that works in non-bootstrap projects as well b/c that would be a more portable technique for me to learn.

Is there a way to do this without introducing structure just for layout? In other words, is there a rule only solution?

.phase .float-right {
  float: right;
}

.phase .image-carousel {
  display: table-cell;
  vertical-align:middle;
  height: 175px;
  width: 900px;
  border: 1px solid red;
  background-color: orange;
}

.phase .image-carousel .circle {
  position: relative;
  float: left;
  top: calc(0.5vh + 20px);
  height: 40px;
  width: 50px;
  border-radius: 50%;
  background-color: white;
  padding-top: 10px;
}

.arrow-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 26.0px 15px 0;
  border-color: transparent #000000 transparent transparent;
  margin-left: 10px;
}

.arrow-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #000000;
  margin-left: 15px;
}

.phase .image-carousel .thumbnail {
  float: left;
  top: calc(0.5vh - 100px);
  width: 100px;
  height: 100px;
  border: 2px solid #ddd;
  background-color: black;
}
<div class="phase angular-animate" ng-class="color($index)" ng-repeat="phase in phases">
  <div class="float-right">
    <div class="image-carousel">
      <div class="circle">
        <div class="arrow-left"></div>
      </div>
      <div class="thumbnail">
        <img src="http://dummyimage.com/100/green.png" />
      </div>
      
          <span class="thumbnail">
            <img src="http://dummyimage.com/100/green.png" />
          </span>
          <span class="thumbnail">
            <img src="http://dummyimage.com/100/green.png" />
          </span>
          <span class="thumbnail">
            <img src="http://dummyimage.com/100/green.png" />
          </span>
      <div class="circle">
        <div class="arrow-right"></div>
      </div>

    </div>
  </div>
</div>



Solution :

Will something like this be a good start?

.container {
  width: 80%;
  margin: 0 auto;
  background-color: #eee;
  text-align: center;
}

.item {
  display: inline-block;
  width: 15%;
  height: 60px;
  margin: 10px 2%;
  background-color: #bbb;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

This one might be even better...

html, body {
    margin: 0;
    padding: 0;
}
.container {
    width: 80%;
    margin: 0 auto;
    text-align: right;
    white-space: nowrap;
    min-width: 500px;
    background-color: #eee;
    overflow: hidden;
}
.container:before {
    content: "";
    float: left;
    width: 4.5454%;
    height: 60px;
    margin-left: -0px;
}
.wrapper {
    float: left;
    width: 18.1818%;
    min-width: 80px;
    height: 60px;
    text-align: center;
    padding: 2px 0;
}
.item {
    margin-left: auto;
    margin-right: auto;
    width: 60px;
    height: 60px;
    background-color: #bbb;
}
<div class="container">
    <div class="wrapper"><div class="item"></div></div>
    <div class="wrapper"><div class="item"></div></div>
    <div class="wrapper"><div class="item"></div></div>
    <div class="wrapper"><div class="item"></div></div>
    <div class="wrapper"><div class="item"></div></div>
</div>


    CSS Howto..

    How to move links in the middle of the Web page using html/css?

    How to apply CSS width to a submit input on Firefox?

    How to make links one link per line, only in the footer via css?

    How do I get rid of the last tr td bottom border using css?

    How to create overlaying papers (pile) - CSS / HTML

    How to force text to wrap inside inline-block div?

    How to set a tooltip width dynamically?

    Fonts wont change and id height wont show

    How to display a dynamic rating based on css and the value from PHP? [closed]

    Make converted joomla template show 2 colums in main content

    How to convert external css properties to inline property? [closed]

    How to overide all css style classes in an input field without effecting other elements?

    How to change html (jade template) to use *.min js and css in production?

    How to implement CSS multi-level drop down menu with different classes?

    How do I resize a div relative to browser window size?

    How to use css to style xhtml markup made only of divs like a table [closed]

    How to apply a CSS transition only to the transform property

    IE8 Not showing divs with floats

    How do I create a fallback for the HTML5 search cancel button in webkit?

    How do I stop animation in HTML and CSS

    How to upgrade web project with latest fancy Bootstrap & SASS

    How to get a navbar to display text depending on button clicked

    How can we avoid the shake when we hover over an element and set its border?

    How to horizontally center align a span inside a div

    How to call a image class on a regular interval

    how to show an arrow to the only li item that has sub-menu

    How can I apply a font type to everything using css

    I have a CSS file in my App_Themes folder - how can I apply it to my web user control?

    How to make link change the css in the following page [closed]

    li:before{ content: “■”; } How to Encode this Special Character as a Bullit in an Email Stationery?