实现响应式 CSS“轮播”组件时出现奇怪的水平间隙答案

【问题标题】：Strange horizontal gap when Implementing a responsive css "carousel" component实现响应式 CSS“轮播”组件时出现奇怪的水平间隙
【发布时间】：2013-07-02 06:16:11
【问题描述】：

我正在为我正在实施的网站开发一个自包含的响应式 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/ 作为起点。

【问题讨论】：

标签： css html responsive-design

【解决方案1】：

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

http://jsfiddle.net/RAbSU/

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

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

【讨论】：

将显示更改为 block with float left 会删除空格，但会导致元素在行尾换行，因此这不是一个好的解决方案。但答案中的第一个解决方案起到了作用，所以我将其标记为正确。

【解决方案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>

【讨论】：