CSS如何在父div的每一侧放置4个div

Question

我希望以下列方式在父div中包含4个div：

我可以使用固定位置并相应地为每个子div设置右/左/上/下= 0，如果它们不在div中，但是现在，我无法弄清楚如何执行此操作。

Answer 1

在这里，但是我不确定这将如何在响应性方面表现，因为父级具有固定的大小，但是如果父级改变大小，子级div应该能够适应。有些css可以合并，但我将它们全部分开以供参考

＆＃13;

＆＃13;

.parent {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid black;
}

.div1 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 20%;
  background-color: green;
}

.div2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 80%;
  background-color: blue;
}

.div3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 20%;
  background-color: red;
}

.div4 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20%;
  height: 80%;
  background-color: brown;
}

＆＃13;

<div class="parent">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
  <div class="div3">
    DIV3
  </div>
  <div class="div4">
    DIV4
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

考虑在嵌套的absolute元素上使用div定位，并在包含元素内，根据需要通过声明top，bottom，{{1}来适当地抵消它们的位置分别为{}和left属性。

代码段演示

注意：
在下面的演示中，包含大小调整属性的包含元素已被包裹在相关元素周围，以演示此方法的响应行为。

通过单击包含元素左下角的图标并垂直或水平拖动来手动调整元素大小。

＆＃13;

＆＃13;

right

＆＃13;

* {
  box-sizing: border-box;
  font-family: arial;
}

.outer {
  border: 3px solid black;
  width: 100%;
  height: 100%;
  position: relative; /* required */
}

.outer-wrapper { /* purely for the sake of responsive demonstration */
  padding: 10px;
  resize: auto;
  overflow: hidden;
  border: 3px dashed gray;
  width: 400px;
  height: 400px;
}

.outer div {
  position: absolute;
  padding: 10px;
  font-weight: bold;
  font-size: 12px;
}

.outer div:nth-child(odd) {
    width: 80%;
    height: 20%;
}

.outer div:nth-child(even) {
    width: 20%;
    height: 80%;
}

.outer div:nth-child(1) {
  background: #ed1c24;
  left: 0;
  top: 0;
}

.outer div:nth-child(2) {
    background: #00a2e8;
    right: 0;
    top: 0;
}

.outer div:nth-child(3) {
    background: #22b14c;
    right: 0;
    bottom: 0;
}

.outer div:nth-child(4) {
    background: #b97a57;
    left: 0;
    bottom: 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

对您有所帮助

.parent{
  position: relative;  
  width: 100%;
  height: 100vh;
  border: 1px solid black;  
}
.parent>div{
  position:absolute;
  text-align:center; 
}
.one{ 
  background-color: green;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 20%;  
}
.two{  
  background-color: blue;
  top: 0;
  right: 0;
  width: 20%;
  height: 80%;  
}
.three{  
  background-color: red;
  top: 0;
  left: 0;
  width: 80%;
  height: 20%;  
}
.four{  
  background-color: brown;
  bottom: 0;
  left: 0;
  width: 20%;
  height: 80%;  
}

<div class="parent">
  <div class="one"> Div1</div>
  <div class="two">Div2</div>
  <div class="three">Div3</div>
  <div class="four">Div4</div>
</div>