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

我删除了浮动控件，并在正文中添加了显示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

也许这会对您有所帮助。

Usage
map(.x, .f, ...)
... Additional arguments passed on to .f.

在JSFiddle上测试此代码。

希望我能对您有所帮助；）

如何在其他DIV的RHS的剩余空间中将DIV居中

2 个答案: