CSS - 定位多个相邻的div，使两个div之间有一个堆叠在一起

Question

我面临一个问题，我需要让几个相邻的div以某种方式定位：

他们的html布局位置紧挨着彼此：

<div class="parent">
    <div class="div1">....</div>
    <div class="div2">....</div>
    <div class="div3">....</div>
    <div class="div4">....</div>
</div>

我已尝试使用柔性盒并将Div1和Div4浮出水面，但它无法正常工作。我还需要将Div1和Div4的高度全部垂直对齐到其正确的动态高度，具体取决于Div2和Div3的内容。

Answer 1

CSS网格可以帮助您轻松解决。

＆＃13;

＆＃13;

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px [col3-end];
  grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
}

.div1, .div2, .div3, .div4 {
  background-color: #444;
  color: #fff;
  padding: 20px;
}

.div1 {
  grid-column: col1-start;
  grid-row: row1-start / row2-end ;
}
.div2 {
  grid-column: col2-start ;
  grid-row: row1-start;
}
.div3 {
  grid-column: col2-start;
  grid-row: row2-start ;
}
.div4 {
  grid-column: col3-start ;
  grid-row: row1-start / row2-end ;
}

＆＃13;

<div class="parent">
    <div class="div1">....</div>
    <div class="div2">....</div>
    <div class="div3">....</div>
    <div class="div4">....</div>
</div>

＆＃13;

＆＃13;

＆＃13;

可以找到更多示例HERE。

Answer 2

这是flexbox的一个想法：

Executing task: C:/MinGW/bin/g++ C:\Users\codyc\Desktop\SDL\SDL2-2.0.8\i686-w64-mingw32\bin C:\Users\codyc\Desktop\SDL\SDL2-2.0.8\i686-w64-mingw32\include\SDL2 C:\Users\codyc\Desktop\SDL\SDL2-2.0.8\i686-w64-mingw32\lib <
c:/mingw/bin/../lib/gcc/mingw32/6.3.0/../../../../mingw32/bin/ld.exe: cannot find C:\Users\codyc\Desktop\SDL\SDL2-2.0.8\i686-w64-mingw32\bin: Permission denied
c:/mingw/bin/../lib/gcc/mingw32/6.3.0/../../../../mingw32/bin/ld.exe: cannot find C:\Users\codyc\Desktop\SDL\SDL2-2.0.8\i686-w64-mingw32\include\SDL2: Permission denied
c:/mingw/bin/../lib/gcc/mingw32/6.3.0/../../../../mingw32/bin/ld.exe: cannot find C:\Users\codyc\Desktop\SDL\SDL2-2.0.8\i686-w64-mingw32\lib: Permission denied
collect2.exe: error: ld returned 1 exit status
The terminal process terminated with exit code: 1

* {
  box-sizing:border-box;
}

.parent {
  display:flex;
  height:200px;
  flex-direction:column;
  flex-wrap:wrap;
}
.div1,.div4 {
  height:100%;
  width:20%;
  border:1px solid green;
}
.div2,.div3 {
  height:50%;
  width:60%;
  border:1px solid red;
}

Answer 3

我会这样做：

＆＃13;

＆＃13;

*{
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent{
  display: flex;
  padding: 15px;
}

.a, .b{
  background: #ddd;
  margin: 10px;
  flex-basis: 20%;
}

.container{
  width: 60%;
}

.container div{
  background: #ddd;
  margin: 10px;
}

＆＃13;

<div class="parent">
  <div class="a">div1</div>
  <div class="container">
    <div>div</div>
    <div>div</div>
  </div>
  <div class="b">div2</div>
</div>

＆＃13;

＆＃13;

＆＃13;