html - 如何将一个 DIV 居中放置在另一个 DIV 的 RHS 上的剩余空间中

Question

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

我以为我用这里的代码就可以了，但是居中发生在整个宽度上，而不是仅仅在右手边居中。

我试过了，但是居中忽略了 float 的 LHS block 。我尝试让 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 并添加了显示:flex body 。

您还可以使用 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>