Question

有三个容器A，B和C。我想获得以下位置的最终位置：

A）是主要容器（红色）
B）具有A）高度和宽度（根据需要计算）（根据儿童计算），位于A）的右侧
C）具有固定宽度，固定高度，并且在B的中间（垂直）

<div id="mainContainer" style="background:red;width:100px;height:100px;margin-top:50px;text-align:right">
  <div id="singleOptions" style=";height:100%;background:black;float:right;margin:auto">
    <div i="myObject" style="width:10px;height:10px;background:blue;" />
  </div>
</div>
</div>

最后一个要求存在问题，如何将其垂直放置在中间？我尝试使用margin:auto和vertical-align: middle，但不起作用。

Answer 1

我认为这就是您要寻找的。我使用了flexbox并能够在两行中做到这一点:)

我还整理了HTML / CSS。展望未来，您希望将它们分开以使其易于阅读和编辑。

#mainContainer {
  background: red;
  width: 100px;
  height: 100px;
  margin-top: 50px;
  text-align: right;
}

#singleOptions {
  height: 100%;
  background: black;
  float: right;
  display: flex;
  align-items: center;
}

#myObject {
  width: 10px;
  height: 10px;
  background: blue;
}

<div id="mainContainer">
  <div id="singleOptions">
    <div id="myObject"></div>
  </div>
</div>

将div放置在另一个div右侧的中间

1 个答案: