css - 如果空间足够，如何将 div 居中对齐，否则右对齐

Question

父容器 => 灵活宽度（宽度取决于浏览器窗口）

子 div => 900px 的固定宽度（在父级内部）

我的要求是

1. 如果父项的宽度大于 900，则将子 div 居中对齐
2. 如果父项的宽度小于 900，则将子 div 向右对齐。因此，左侧部分将被截断。

有没有纯css解决方案？

Answer 1

您可以尝试使用媒体查询..

例如：

@media only screen and (max-device-width: 900px) {
   .div { margin: 0px auto }
}
@media only screen and (min-device-width: 900px) {
   .div { float: left; }
}

你可以尝试将css与它结合起来......

Answer 2

我稍微摆弄了一下。

你基本上需要这个，对吗？

#parent{
    background-color: blue;
    overflow: hidden;
    direction:rtl;
}

.child{
    width:900px;   
    float:right;
    margin: 0 auto;
    direction:ltr;
}

因此，在不使子 div 浮动到墙壁的情况下对齐 div 的方向，以及子内部的另一个方向，以免弄乱里面的内容。边距：0 自动；使 div 居中并溢出：隐藏以截断。

编辑：现在试试。

Answer 3

parent {direction:rtl}
child {direction:ltr;}

基本上，overflow将从右向左滚动或隐藏左侧如果hidden；

在这里测试和玩它:)：http: //codepen.io/gcyrillus/pen/GHCne

Answer 4

您是否考虑过使用媒体查询？

您只需要确保它们在您定位的所有浏览器中都受支持。