Question

我有这个HTML和CSS

Unable to load DLL 'cvextern' : The specified module could not be found. (Exception from HRESULT: 0x8007007E)

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

这个css技巧<!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>  </div> </div> </body> </html>会使.div { text-align: center; margin-left: -100%; margin-right: -100%;} DIV对齐中心并向左和向右溢出，如果有足够数量的话。这适用于最大化的桌面浏览器窗口。

当窗口宽度缩小时，.outer DIV会在某个时刻进入下一行，这会使其无法响应。

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

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

Answer 1

＆＃34; DIV进入下一行的原因＆＃34;正在分配＆＃39; -100％＆＃39;到.div的左边距和右边距。这意味着每个边距将等于.tile-container的父级.div的宽度，而不是＆＃39; .div＆＃39;的宽度。本身。当浏览器宽度减小时，会发生以下情况，

body宽度减少
然后.tile-container宽度减少
然后.div margin-left margin-right缩小
然后计算.div的宽度减少
然后整个图块（.outer元素）不符合.div
然后瓷砖进入新线

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

在我的情况下，瓷砖的数量会发生变化（最大负载）。因此，左/右边距不能在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，则在渲染视图之后。

制作一套左和右右溢DIV响应

1 个答案: