3

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

对于每个元素，我正在使用：

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

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

4

2 回答 2

7

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

<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>
于 2013-08-17T05:01:54.043 回答
1

Flexboxes ( http://dev.w3.org/csswg/css-flexbox/ ) 做你想做的事，如果你能忍受浏览器支持的当前状态 ( http://caniuse.com/flexbox ) 和需要使用供应商前缀。在你的情况下，是这样的：

#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;
}

这些本质上是响应式的。肯定比一些古怪的 jQuery 插件好。

于 2013-08-17T01:45:15.513 回答