使左右溢出 DIV 集响应答案

【问题标题】：Make set of left & right overflow DIVs responsive使左右溢出 DIV 集响应
【发布时间】：2017-08-06 03:23:59
【问题描述】：

我有这个 HTML 和 CSS

body {
  margin: 0;
}

.tile-container {
  overflow: hidden;
}

.div {
  text-align: center;
  margin-left: -100%;
  margin-right: -100%;
}

.outer {
  color: #fff;
  padding: 9px 30px;
  display: inline-block;
  background-color: #EB6C5D;
  width: 140px;
  margin-right: 2px;
  margin-left: 2px
}

.inner {
  font-size: 16px;
  text-align: center;
  width: 100%;
  text-overflow: ellipsis;
  color: black;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <title>Timeline</title>
</head>

<body>
  <div class='tile-container'>
    <div class='div'>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <div class='outer'>
        <div class='inner'>WEEK1</div>
      </div>
      <!-- Repeated '.outer' DIVs -->
    </div>
  </div>
</body>

</html>

这个 css 技巧 .div { text-align: center; margin-left: -100%; margin-right: -100%;} 使 .outer DIV 居中对齐，并在它们有足够数量的情况下左右溢出。这适用于最大化的桌面浏览器窗口。

当窗口宽度减小时，.outer DIV 有时会进入下一行，这会使其没有响应。

我在.tile-container 上尝试过white-space: nowrap，它解决了上述问题，但现在.outer DIV 未居中。

请提供任何 CSS 技巧来解决此问题，无需任何脚本。

【问题讨论】：

我认为将<div> 居中的技巧是使用margin: 0 auto; 或margin-left: auto; margin-right: auto; jsfiddle.net/82ya72a4
@caramba margin-left:-100%,margin-right:-100%,text-align:center in .div 和 overflow:hidden in .tile-container 使图块中心与向左右隐藏的溢出对齐。 margin: 0 auto 在下一行制作额外的瓷砖。然后在.tile-container 中添加了white-space:nowrap，但图块现在左对齐。

标签： html css responsive-design

【解决方案1】：

“DIV 进入下一行”的原因是将“-100%”分配给.div 的左右边距。这意味着每个边距将等于.tile-container 的宽度，它是.div 的父级，而不是'.div' 本身的宽度。那么当浏览器宽度减小时会发生以下情况，

body 宽度减小
然后.tile-container 宽度减小
然后.div margin-left margin-right 减少
然后.div 的计算宽度减小
那么整个图块（.outer 元素）将不适合.div
然后瓷砖换行

所以唯一的方法（这就是我发现的）是分配所有.outer div 的left/right margin >= the total width（包括填充和边距）。

在我的情况下，瓦片的数量会发生变化（最大负载）。所以 CSS 中不能分配左右边距。

为此完成以下 jQuery 代码

var width = 0;
$('.outer').each(function() {
            width += $(this).outerWidth( true );
});
$('.div').css('margin-left','-'+width+'px');
$('.div').css('margin-right','-'+width+'px');

并改变了css

.div {
    text-align: center;
    /*margin-left: -100%;
    margin-right: -100%;*/
}

注意：脚本必须在页面加载后才能调用。在 angularjs 的情况下，在视图渲染之后。

【讨论】：

在接受我自己的答案之前将等待一段时间，以便任何人提供更好的解决方案来“使瓷砖中心与左右溢出对齐并且仍然响应”。