Question

<div id="narrow">
   <div id="wide">
   </div>
</div>

我有一个div，而另一个div比父母宽。

#narrow div具有可变宽度，#wide div具有固定宽度。

如何将#wide div集中在#narrow div中，以便在#narrow为overflow:hidden时修剪＃strong div的左侧和右侧给定{{1}}？

Answer 1

您可以使用position: absolute然后使用否定margin-left将广角放在居中位置。请注意，仅当元素具有固定宽度时才有效。

JS-Fiddle

#narrow {
    position: relative;
    width: 200px; //may be variable
}

#wide {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -150px; // half the width
    width: 300px; // must be fixed
}

要隐藏流过窄div的部分，可以使用overflow: hidden。

Answer 2

使用css轻松：

#narrow {overflow: hidden;}

Answer 3

试试这个：

#wide{margin:0px auto; position: relative;}

无论你制作另一个广泛的广告，它都会让你的广泛的div保持在屏幕的中心。它也将位于屏幕顶部

将较宽的div放在较窄的一个中心

3 个答案: