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

我正在嘗試創建一個帶有四列的佈局，div 4在桌面和平板電腦上粘滯並且將隱藏在移動設備中。我嘗試了幾種方式，從這個位置溢出來，但是仍然無法弄清楚。任何解決方案，請？ This is the layout 四個div列布局，一個div固定（粘）

這裏是我的代碼：

.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>

來源

2017-04-22 Nish Dekardo

您片劑圖像中混合起來的div 2和3。或者混合了平板電腦代碼。 –

@HastigZusammenstellen，哦，對不起，感謝提醒，我已經更新了。任何解決方案 –

您應該利用Flexbox佈局。在這一點上，浮動和嵌入塊僅比基於表格的佈局略好。 – Derek

看看是否有這種幫助。。

（我沒有使用任何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/

來源

2017-04-22 08:24:24

您可以使用柔性框，下面鏈接可能對您有用
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2017-04-22 08:18:35

，您可以用這些代碼變化達到您的要求。

<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>

我已經改變的事情。

切換DIV4和DIV3在HTML
爲DIV2我給float: left和DIV3 float:right代替內聯塊

來源

2017-04-22 08:28:29

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

回答

相關問題