1

我正在为我正在实施的网站开发一个自包含的响应式 css 组件（轮播类型）。

需要有无限数量的内容项（从服务器加载），一次只显示两个。当用户在项目列表中前进时，他们似乎向左滚动，新项目从右侧过渡，将当前项目推向左侧。

项目应根据当前的响应式布局获得它们的宽度。

一般的想法是让视口成为页面布局的一部分，并且可以接受在px或 中规定的任何宽度%，一个容器可以width: 100%填充视口的大小。和没有包装的水平并排排列的项目，项目的宽度为 50%，因此恰好有两个项目适合容器/视口，其余项目溢出（并被隐藏。）

<div class="viewport">
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <!-- more items get loaded as the user advances through the content -->
    </div>
</div>

“滚动”是通过在第一个项目上设置负边距来实现的 - 这种技术我总是可以设置一个负边距，即：<项目数> * 50%

我主要在以下 jsfiddle 中工作：http: //jsfiddle.net/gZBEV/5/ 项目排列正确，它们根据周围视口的宽度获得宽度。（使用按钮模拟移动/滚动项目）

问题是出现在每个项目之间的水平间隙（如箭头所示），从而破坏了布局。

问题

解决方案是找到一种方法，使项目之间没有水平间隙，如下所示：

理想的解决方案

使用这个小提琴http://jsfiddle.net/gZBEV/5/作为起点。

4

2 回答 2

2

如果您删除 div 内的回车，这将删除空格：

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>
于 2013-07-01T22:13:47.473 回答
2

这是因为元素是display:inline-block. 内联块级元素尊重行高、字体大小和空白。将父级的字体大小更改为 0px 并且间隙消失。这意味着您将不得不在事后重新分配字体大小（非常适合仅图像滑块。对于内容滑块来说不是那么多）。

http://jsfiddle.net/RAbSU/

.container {
  ...
  display: inline-block;    
  font-size: 0px;
  & > * {      
    font-size: 12px;
  }
  ...

编辑：否则，您可以将格式更改为display:blockwith float:left。

于 2013-07-01T22:16:11.913 回答