響應式CSS分區定位優先

首先我要感謝這個社區的成員在過去的幾個月中發現了大量的幫助我。沒有我的一個項目，我沒有你的提示和技巧，我沒有完成。響應式CSS分區定位優先

現在我有一個負責任的佈局，我需要你的幫助了一個問題：

我有這樣的佈局： http://codepen.io/Buzzjump/pen/tfeys

<div class='outer'> 
<div class='sidebar_links'>Div1</div> 
<div class='mitte_rechts'> 
<div class='d2'>Div2</div> 
<div class='d1'>Div3</div> 
</div> 
</div>

現在目前的CSS

div{ 
    display:inline-block; 
    background-color:#cdcdcd; 
    margin:0px; 0;padding:0px;width:150px} 
.d1{ 
    float:right; 
    background: blue; 
    color: white; 
} 
.d2{ 
    background: orange; 
} 
.mitte_rechts{ 
    padding:0; 
    width:70.81%; 
    float: left; 
    margin-left:0px; 
} 

.sidebar_links{ 
    height: 200px; 
    float: left;  
    background: red; 
} 

.outer{ 
    height: 230px; 
    min-width: 80%; 
    background-color:yellow; 
    margin-left: 20px; 
    overflow: hidden; 

}

有一個外盒（外）和兩個內盒（Div1和mitte_rechts）。 'mitte_rechts'中還有兩個盒子（Div 2，Div3），它們都是對齊的。我想要的是，當窗口縮小到斷點（768）時，第一個Div3顯示在Div2的mitte_rechts下。也許我只是封鎖了，但是有沒有解決方案？至此，沒有使用JS。

在此先感謝。

來源

2014-07-27 Buzzjump

嘗試了以下工作：

.d1 { 
    float: right; 
    background: blue; 
    color: white; 
} 

.d2 { 
    background: orange; 
    float: left; 
} 

@media screen and (max-width: 768px) { 
    .d1, .d2 { 
     float: none; 
     display: block; 
    } 
}

順便說一句：你並不需要在你的div inline-block。內聯塊是浮動的替代方案。所以要麼使用浮動塊，要麼使用內嵌塊。我不是內聯塊的粉絲，因爲IE6和IE7不支持它。

來源

2014-07-27 13:26:36 bitWorking

謝謝bitWorking，你的提示工作。我將在今天的項目中實施它。 – Buzzjump

嘗試以下操作：

1）刪除width:70.81%;' from '.mitte_rechts

2）添加以下樣式：

.d1, .d2{ 
    float:left; 
} 

@media (min-width: 768px){ 
    .mitte_rechts{ 
    width:70.81%; 
    } 

    .d1{ 
    float:right; 
    } 
}

來源

2014-07-27 13:27:19

你可以添加到你的CSS

@media (max-width: 768px) { 
    .d1{ 
     float: lef; 
    } 
    .d2{ 
     margin-right:100%; 
    } 
}

會發生什麼這裏是.d1決定在第一個左邊浮動然後.d2佔用了他在右側的剩餘空間，所以.d1被迫按.d2

來源

2014-07-27 13:27:33

響應式CSS分區定位優先

回答

相關問題