Question

我想在一个模式中安排4个div块。我尝试使用float，position，flex CSS指令，但似乎没有任何效果。查看其他答案并尝试设置边距，浮动或宽度似乎不起作用，我的div只是忽略float命令。我从下面的代码中删除了所有的尝试，因为我使用的任何浮点数或边距弄乱了div，使它们彼此重合，等等，这会模糊我的问题。

使用ul li { <what you want here> }没有帮助，因为它并排排列所有div，我需要其他东西。

问题

如何安排display: flex和RIGHT TOP div位于RIGHT BOTTOM div的右侧？

澄清...... LEFT SIDE是第一列，LEFT SIDE div位于第二列，RIGHT div应低于所有之前的div。

＆＃13;

BOTTOM

＆＃13;

#block1 {} #one {
  background-color: yellow;
  width: 100px;
  height: 200px;
}
#two {
  background-color: pink;
  width: 100px;
  height: 100px;
}
#three {
  background-color: green;
  width: 100px;
  height: 100px;
}
#block2 {
  background-color: orange;
  width: 200px;
  height: 200px;
}

＆＃13;

Answer 1

如果我理解得对你想要这个。所以只需添加一个包装并浮动它！

#block1 {
  overflow: auto;  
} 
#one {
  background-color: yellow;
  width: 100px;
  height: 200px;
}
#one{
    float: left;
}
#boxer{
    float: left;
}
#two {
  background-color: pink;
  width: 100px;
  height: 100px;
}
#three {
  background-color: green;
  width: 100px;
  height: 100px;
}
#block2 {
  background-color: orange;
  width: 200px;
  height: 200px;
}

<div id="block1">
  <div id="one">LEFT SIDE</div>
  <div id="boxer">
    <div id="two">RIGHT TOP</div>
    <div id="three">RIGHT BOTTOM</div>
  </div>
</div>

<div id="block2">
  BELOW
</div>

Answer 2

最简单的方法是将两个正确的div包装在一个包装器中并将其浮动到左侧div的左侧。然后你可以清除底部div以使它们显示在它们下面。

#block1 {} #one {
  background-color: yellow;
  width: 100px;
  height: 200px;
}
#one, #right-wrapper {
  float: left;
}
#two {
  background-color: pink;
  width: 100px;
  height: 100px;
}
#three {
  background-color: green;
  width: 100px;
  height: 100px;
}
#block2 {
  background-color: orange;
  width: 200px;
  height: 200px;
  clear: left;
}

<div id="block1">
  <div id="one">LEFT SIDE</div>
  <div id="right-wrapper">
    <div id="two">RIGHT TOP</div>
    <div id="three">RIGHT BOTTOM</div>
  </div>
</div>

<div id="block2">
  BELOW
</div>

Answer 3

你正在寻找这个吗？我不确定你想要左侧和下侧。我将LEFT SIDE左侧和顶部剪裁。并且低于底部和中心（注意宽度的一半设置为50％）。

#block1 {} #one {
  background-color: yellow;
  width: 100px;
  height: 200px;
  position: fixed;
  top: 0px;
  left: 0px;
}
#two {
  background-color: pink;
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0px;
  right: 0px;
}
#three {
  background-color: green;
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 0px;
  right: 0px;
}
#block2 {
  background-color: orange;
  width: 200px;
  height: 200px;
  position: fixed;
  bottom: 0px;
  left: calc(50% - 100px);
}

<div id="block1">
  <div id="one">LEFT SIDE</div>
  <div id="two">RIGHT TOP</div>
  <div id="three">RIGHT BOTTOM</div>
</div>

<div id="block2">
  BELOW
</div>

如何在自定义模式中安排div，同时有更多div经常在它们之后流动？

3 个答案: