Question

我试图将四个元素放在容器div中;我有div 2和div 3的问题，我不能把它们放在彼此之上！那么如何在这种情况下将2个div放在容器内？

HTML：

   .Container {height: 15px;width: 50%;float: left;}

   .Div1 {height: 15px;width: 20%;float: right;}

   .Div4 {height: 15px;width: 20%;float: left;}

   .Div2  {height: 15px;width: 20%;float: ??????????}

CSS：

Copy To Output Directory

Answer 1

请检查此基本布局并将HTML插入其中。我已经为所有div添加了边框以查看div大小，请忽略它。

div{
  border:1px solid black;
}
.container{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:  flex;
}
.left{
  width:33.33333333333333%;
  float: left;
}
.center{
  width:33.33333333333333%;
  float:left;
}
.right{
  width:33.33333333333333%;
  float:left;
}

<div class="container">
  <div class="left">
    left div
  </div>
  <div class="center">
    <div>top div</div>
    <div>bottom div</div>
  </div>
  <div class="right">
    right
  </div>
</div>

Answer 2

当我构建自己的CSS库时，我正在这个特殊情况下潜水，基本上这是我提出的CSS / HTML伪代码：

Div 0 | position relative
  Div 4 | float left
  /Div 4

  Div 2 | position relative
  /Div 2

  Div 3
  /Div 3

  Div 1 | position absolute; top 0; right 0
  /Div 1
/Div 0

（您可能需要将所有div指定为box-sizing: border-box，但我认为不需要）

下面是一个证明这一点的片段。

＆＃13;

body{
  width: 100vw;
  height: 100vh;
    
  position: relative;
  display: block;
  
  overflow: hidden;
  overflow-y: auto;
}

slot{
  color: #e9ebee;
  text-align: center;
}

[class*="w"],
[class*="h"],
[class*="mw"],
[class*="mh"]{
  display: block;
  box-sizing: border-box;
  
  word-wrap: break-word;
  overflow: auto;
  
  float: left;
}

.fl{ float: left; }

.rel{  position: relative; }
[class*="abs-"]{ position: absolute; }
.abs-t{ top: 0px; }
.abs-r{ right: 0px; }

.h12, .mh12{ height: 100vh; }
.h2, .mh2{ height: calc( 2 * (100vh / 12)); }
.h8, .mh8{ height: calc( 8 * (100vh / 12)); }

.w1{ width: calc(100vw / 12); }
.w1{ width: calc(10 * (100vw / 12)); }
.mw2{ width: calc(2 * (100vw / 12)); }
.mw8{ width: calc(8 * (100vw / 12)); }

＆＃13;

<body>
 
 <slot class="h12 w1 mw2 mh12 fl" style="background: #ff0000;">div 4</slot>
 <slot class="h2 w10 mw8 mh2 rel" style="background: #00ff00;">div 2</slot>
 <slot class="h2 w10 mw8 mh2" style="background: #ff00ff;">div 3</slot>
 <slot class="h8 w10 mw8 mh8" style="background: #ffff00;"></slot>
 <slot class="h12 w1 mw2 mh12 abs-r abs-t" style="background: #0000ff;">div 1</slot>

</body>

＆＃13;

Answer 3

这可以通过flex来完成，在居中的div上有3个div中心和右边flex-direction: column，这样孩子就可以互相堆叠了：

示例：

div {
  border: 3px solid black;
  font-family: sans-serif;
  text-align: center;
  color: red;
  margin: 10px;
}

.container {
  display: flex;
}

.left {
  flex: 1
}

.center {
  flex: 2;
  margin: 0;
  border: none;
  flex-direction: column;
}

.right {
  flex: 1
}

<div class="container">
  <div class="left">
    Div 4
  </div>
  <div class="center">
    <div>Div 2</div>
    <div>Div 3</div>
  </div>
  <div class="right">
    Div 1
  </div>
</div>
<div>
    Div 0
</div>

希望这有帮助！

如何将div放在容器内？

3 个答案: