Evenly spacing out elements within a div for responsive design

问题

I have four elements within a div and want to space them out evenly in the available space. What technique is considered best practice for responsive design in this case?

For each element, I am using:

height: 75px;
width: 75px;
border-radius: 50%;
margin-right: 20px;

JS Fiddle: http://jsfiddle.net/adnanymous/9yYZJ/

回答1:

Since you're already using bootstrap, just insert a div.row-fluid inside that div that should contain the four items. Wrap each of those four items in a div.span3. That will auto scale the spacing until you get down before 767px wide (bootstrap's phone size), at which point everything will stack vertically. This avoids adding extra libraries and needs will work even without javascript enabled.

<div class="row-fluid">
  <div class="span3">Thing1</div>
  <div class="span3">Thing2</div>
  <div class="span3">Thing3</div>
  <div class="span3">Thing4</div>
</div>

回答2:

Flexboxes (http://dev.w3.org/csswg/css-flexbox/) do exactly what you want, if you can live with the current state of browser support (http://caniuse.com/flexbox) and the need to use vendor prefixes. In your case, something like this:

#my-div {
    display: -webkit-flex;        
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: flex-between; /* flush against edges */
    -webkit-justify-content: flex-around;  /* space at left/right */
}

.elt {
    -webkit-flex: none; /* do not grow and shrink items */
    height: 75px;
    width: 75px;
    border-radius: 50%;
    margin-right: 20px;
}

These are responsive by nature. Certainly better than some flaky jQuery plugin.

来源：https://stackoverflow.com/questions/18283975/evenly-spacing-out-elements-within-a-div-for-responsive-design

标签

twitter-bootstrap

responsive-design