如何将DIV集中在另一个DIV的RHS上的剩余空间中

Question

我想要一个用于导航的左手div，它可以是固定宽度的。我希望另一个div位于右侧剩余空间的中心。

我以为这里的代码已经完成了，但居中是在整个宽度上进行的，而不仅仅是在右手边居中。

我试过了，但居中忽略了漂浮的LHS块。我试着让div具有style="display:inline block"，但这也不起作用。

你知道我该怎么修吗？

#left {
float: left;
width: 200px;
height: 200px;
background-color: cyan;
}
#right {
width: 100%;
height: 200px;
background-color: green;
border: 1px solid red;
}
#centrethis {
width: 400px;
height: 100px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
}

<div id="left">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="right">
right
<div id="centrethis">
centre this
</div>
</div>

Answer 1

我删除了float并在主体中添加display:flex。

您还可以使用flexbox 非常容易地居中元素

body {
display: flex
}
#left {
width: 200px;
height: 200px;
background-color: cyan;
}
#right {
display: flex;
width: 100%;
height: 200px;
background-color: green;
border: 1px solid red;
}
#centrethis {
align-self: center;
width: 400px;
height: 100px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
}

<div id="left">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="right">
<div id="centrethis">
centre this
</div>
</div>

Answer 2

也许这会对你有所帮助。

#left {
z-index: 10; /*to put this above #right element*/
position: sticky; /*to put this element out of regular DOM order*/
}
#right {
position: relative; /*makes element relative to his parent*/
left: 200px; /*moves element to the right site*/
width: calc(100% - 200px); /*shrinks div*/
}

在JSFiddle上测试此代码。

我希望我帮助了你；(