Html 制作一套左&；右溢流阀

我有这个HTML和CSS

正文{
保证金：0；
}
.瓷砖容器{
溢出：隐藏；
}
.分区{
文本对齐：居中；
左边距：-100%；
保证金权利：-100%；
}
.外部{
颜色：#fff；
填充：9px 30px；
显示：内联块；
背景色：#EB6C5D；
宽度：140px；
右边距：2px；
左边距：2倍
}
.内部{
字体大小：16px；
文本对齐：居中；
宽度：100%；
文本溢出：省略号；
颜色：黑色；
溢出：隐藏；
}

时间线
星期一
星期一
星期一
星期一
星期一
星期一
星期一
星期一
星期一
星期一
星期一
星期一
星期一
星期一
星期一

之所以“DIVs进入下一行”，是因为将“-100%”分配给

.div的左右边距。这意味着每个边距将等于
.tile container
的宽度，该容器是
.div
的父容器，而不是.div本身的宽度。当浏览器宽度减小时，会发生以下情况：


车身
宽度减小
然后
.tile容器
宽度减小
然后
.div margin left margin right
减小
然后，
.div
的计算宽度减小
那么整个磁贴（
.outer
元素）将不适合
.div
然后瓷砖就变成了新的线条

因此，唯一的方法（这就是我发现的）是分配
左/右边距>=所有
.outer
div的总宽度（包括填充和边距）

在我的例子中，瓷砖的数量会发生变化（加载时的最大值）。因此，左/右边距不能在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，在呈现视图之后。
之所以“DIVs进入下一行”，是因为将“-100%”分配给
.div
的左右边距。这意味着每个边距将等于
.tile container
的宽度，该容器是
.div
的父容器，而不是.div本身的宽度。当浏览器宽度减小时，会发生以下情况：


车身
宽度减小
然后
.tile容器
宽度减小
然后
.div margin left margin right
减小
然后，
.div
的计算宽度减小
那么整个磁贴（
.outer
元素）将不适合
.div
然后瓷砖就变成了新的线条

因此，唯一的方法（这就是我发现的）是分配
左/右边距>=所有
.outer
div的总宽度（包括填充和边距）

在我的例子中，瓷砖的数量会发生变化（加载时的最大值）。因此，左/右边距不能在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，在视图渲染后。
我认为将
居中的技巧是使用
边距：0自动或
左边距：自动；右边距：自动
@caramba
左边距：-100%，右边距：-100%，文本对齐：在
.div
中居中
和
中溢出：隐藏
。平铺容器
使平铺中心与左右隐藏的溢出对齐<代码>边距：0自动
在下一行生成额外的平铺。然后在
.tile container
中添加了
空白：nowrap
，但是现在瓷砖是左对齐的。我认为将
居中的诀窍是使用
边距：0自动或
左边距：自动；右边距：自动
@caramba
左边距：-100%，右边距：-100%，文本对齐：在
.div
中居中
和
中溢出：隐藏
。平铺容器
使平铺中心与左右隐藏的溢出对齐<代码>边距：0自动
在下一行生成额外的平铺。然后在
.tile container
中添加了
空白：nowrap
，但是tile现在是左对齐的。在接受我自己的答案之前，我将等待一段时间，以便任何人都能提供更好的解决方案“使tiles中心与左右溢出对齐，并且仍然响应”。将等待一段时间，然后接受我自己的答案，以便任何人都能提供更好的解决方案，即“使瓷砖中心与左右溢出对齐，并且仍然响应”。