四个div列布局，一个div固定（粘性）

Question

我正在尝试创建一个包含四列的布局，其中div 4在桌面和平板电脑上是粘性的，并且将隐藏在移动设备中。我从位置尝试了几种方法，溢出和所有，但仍然无法弄清楚。有什么解决方案吗？ This is the layout

这是我的代码：

  .div1 {
  float: left;
  width: 45%;
}

.div2 {
  display: inline-block;
  width: 30%;
}

.div3 {
  display: inline-block;
  width: 20%;
}

.div4 {
  float: right;
  width: 10%;
}


/*For tablets*/

@media (max-width:767px) {
  .div1 {
    width: 45%;
  }
  .div2 {
    width: 45%;
  }
  .div3 {
    width: 100%;
  }
  .div4 {
    width: 10%;
  }
  /*For mobile*/
  @media (max-width:320px) {
    .div1 {
      width: 100%;
    }
    .div2 {
      width: 100%;
    }
    .div3 {
      width: 100%;
    }
    .div4 {
      display: none;
    }
  }

<div class="homesection">
  <div class="div1">Column 1</div>
  <div class="div2">Column 2</div>
  <div class="div3">Column 3</div>
  <div class="div4">Column 4</div>
</div>

Answer 1

看看是否有任何帮助..

（我没有使用任何js作为粘性，只是位置：固定）

body { 
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.container, .first3, .div1, .div2, .div3, .div4 { 
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
}
.div1, .div2, .div3, .div4 { 
  overflow: hidden;
}
.container {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1;
  height: 100%;
}
.first3 {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 100%;
  font-size: 40px;
}
.div1 {
  width: 43.33%;
  background-color: hsla(0, 0%, 10%, 1);
}
.div2 {
  width: 33.33%;
  background-color: hsla(0, 0%, 20%, 1);
}
.div3 {
  width: 23.33%;
  background-color: hsla(0, 0%, 30%, 1);
}
.div4 {
  position: fixed;
  top: 0; right: 0;
  display: flex;
  width: 10%;
  background-color: hsla(0, 0%, 40%, 1);
}

@media (max-width: 767px) {
  .first3 { width: 100%; font-size: 16px; }
  .div1 { width: 45%; height: 50%; }
  .div2 { width: 45%; height: 50%; } 
  .div3 { width: 100%; height: 50%; }
  .div4 { 
    position: fixed;
    top: 0; right: 0;
    height: 50%; 
  }
}

@media (max-width: 320px) {
  .first3 { width: 100%; }
  .div1 { width: 100%; height: auto; }
  .div2 { width: 100%; height: auto; } 
  .div3 { width: 100%; height: auto; }
  .div4 { display: none; }
}

<div class="container">
  <div class="first3">
    <div class="div1">
Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler
    </div>
    <div class="div2">
Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler
    </div>
    <div class="div3">
Content filler div 3 content filler div 3 Content filler div 3 content filler div 3 Content filler div 3 content filler div 3
    </div>
  </div>
  <div class="div4">
Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler
  </div>
</div>

<强>拨弄

https://jsfiddle.net/Hastig/ogvn03oc/2/

Answer 2

您可以使用弹性框，下面的链接可能对您有用 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

您可以通过这些代码更改来满足您的要求。

<div class="homesection">
 <div class="div1">Column 1</div>
 <div class="div2">Column 2</div>
 <div class="div4">Column 4</div>
 <div class="div3">Column 3</div>
</div>
<style>
 .div1{ float: left; width: 40%; }
 .div2{ float: left; width: 30%; }
 .div3{ float: right; width: 20%; }
 .div4{ float: right; width: 10%; }
 /*For tablets*/
 @media screen and (max-width:767px){
  .div1{ width:45%; }
  .div2{ width:45%; } 
  .div3{ width:100%;}
  .div4{ width:10%; }
 }
 /*For mobile*/
 @media screen and (max-width:320px){
  .div1{ width:100%; }
  .div2{ width:100%; }
  .div3{ width:100%; }
  .div4{ display:none; }
 }
</style>

我改变的事情。

1. 在html
中切换div4和div3
2. 对于div2我给了float: left和div3 float:right而不是inline-block