Question

我想将div放在另一个div的右侧，该margin-left: auto; margin-right: auto;位于屏幕中央，位置为#text { width: 500px; height: auto; margin-left: auto; margin-right: auto; margin-top: 150px; } #image { overflow: hidden; float: right; }。

我试图将两个div包装成一个似乎不起作用，因为它使包装器居中而不是第一个div。

有什么想法？谢谢！

到目前为止我的css代码：

{{1}}

Answer 1

感谢css;你有html吗？

尝试在包装器外拉div;你的定位应该有效。如果它继续给你带来问题，请尝试

{position: absolute;}

Answer 2

这有点像黑客，但这似乎运作良好（至少在Chrome中）。

<div style="position:relative; width:50%; border:1px solid black; margin-left: auto; margin-right: auto;">
    centered text
    <div style="position:absolute; left:100%; top:-1px; width:50px; border:1px solid red">
        right text
    </div>
</div>

外部position: relative;上的div属性使内部div“相对”绝对定位到外部div。在内部position: relative;上使用div会产生不同的结果（尽管您可能需要付出一些努力）。

将内部div定位到left:100%;会将内部div的左边框带到外部div的右边框。 top:-1px;用于补偿外div上的边框。如果您没有边框，top:0px;就足够了。内部width上的div可以设置为外div宽度的百分比。

我建议将其放入jsFiddle并使用属性，直到你得到它为止。您还需要在您选择的目标浏览器中进行测试。

Answer 3

我想象的最好的方法就是在你左边的div上使用一个边距让它在中心位置，然后将你的第二个div漂浮到它上面，这样就可以了

<div style="position:relative;float:left;width:800px;margin:0 auto">
 <div style="position:relative;float:left;width:500px;margin:0 0 0 150px">
  This should go to the centre of the centred 800px div
 </div>
 <div style="position:relative;float:left;width:150px">
  This will be pushed up to the left of the centred 500px div
 </div>
</div>

我认为这不那么'hacky'......

将一个div放在另一个位于中心的div旁边

3 个答案: