1つのdivが固定された4つのdivの列レイアウト

Question

divと4がデスクトップとタブレットに貼り付いている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を使用didntは：固定）

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. iがfloat: leftを与えているとDIV3 float:right代わりのインラインブロック