为响应式设计在 div 中均匀间隔元素 [英] Evenly spacing out elements within a div for responsive design

问题描述

我在一个 div 中有四个元素，并希望在可用空间中将它们均匀地隔开.在这种情况下，哪种技术被认为是响应式设计的最佳实践?

对于每个元素，我使用:

高度:75px；宽度:75px；边界半径:50%；右边距:20px；

JS 小提琴:http://jsfiddle.net/adnanymous/9yYZJ/

解决方案

由于您已经在使用引导程序，只需在应包含四个项目的 div 中插入一个 div.row-fluid 即可.将这四项中的每一项都包装在 div.span3 中.这将自动缩放间距，直到您在 767px 宽(引导程序的手机大小)之前缩小，此时所有内容都将垂直堆叠.这避免了添加额外的库，即使没有启用 javascript，需求也能工作.

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

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/

解决方案

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>

这篇关于为响应式设计在 div 中均匀间隔元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！