如何使該框固定？

即時通訊新的HTML/CSS和我玩一點點浮動。我想要做的就是當左邊的綠色框變得小於150像素（不是屏幕，我的意思是框本身。當你玩耍時，你看到每個寬度相對於％移動，我想綠框移動就像現在一樣，但是當該框變得小於150px時，它應該停止變小）。我試圖通過添加min-width：150px來實現這個目標，但是當它越來越小時，它就會殺死佈局，使得DIV的三個框不再在一行中。如何使該框固定？

（請忽略這些衆多的ID，它只是對練）

#a { 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #ea0000; 
 
    } 
 

 
    #b { 
 
    width: 15%; 
 
    height: 200px; 
 
    background-color: #0aa699; 
 
    float:left; 
 
    } 
 

 
    #c1 { 
 
    width: calc(85%/2); 
 
    height: 200px; 
 
    background-color: #00ACEE; 
 
    float:right; 
 
    } 
 

 
    #c2 { 
 
    width: calc(85%/2); 
 
    height: 200px; 
 
    background-color: #ac2aa1; 
 
    float:right; 
 
    } 
 

 
    #d { 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #ff8300; 
 
    } 
 

 
    .clear:before, .clear:after {  
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    }

 <header> 
 
      <div id="a"> 
 
      </div> 
 
     </header> 
 

 

 
     <div class="clear"> 
 

 
      <section> 
 
       <div id="b"></div> 
 
      </section> 
 

 
      <aside> 
 
       <div id="c1"></div> 
 
       <div id="c2"></div> 
 
      </aside> 
 

 
     </div> 
 

 

 
     <footer> 
 
      <div id="d"></div> 
 
     </footer>

來源

2016-05-25 Johnny

，而你正在學習HTML和CSS結帳bootstrap，它有很多相對大小的幫助。 –

感謝Rhys，那是我學習了所有基礎之後想要做的。 – Johnny

johnny，如果您想成爲一名優秀的前端開發人員，請遠離引導程序並繼續執行您現在正在做的事情。 – Aaron

，我已經修復這裏的問題：

https://jsfiddle.net/vkfd2t6b/1/

我有什麼完成設置150px的最小寬度爲#b。然後aside包裝是我已經設置了width: calc(100% - 150px);的寬度。我已經漂浮了aside的權利。 aside中的兩個元素就設置爲50％。

#b { 
    min-width: 150px; 
}   
aside { 
    width: calc(100% - 150px); 
    float: right; 
} 
#c1, #c2 { 
    width: 50%; 
}

此外，我已經添加了一個媒體查詢，以便當格比150像素更大的它切換aside寬度計算到15％，而不是150像素

@media screen and (min-width: 1000px){ 
    aside { 
     width: calc(100% - 15%); 
    } 
}

來源

2016-05-25 10:11:05

對於誤解抱歉，我的意思是：如果您現在玩弄代碼，DIV中的所有框都相對於％移動，但現在當綠框變得小於150px時應該停止變小，並保持在150px。我不是指連接到視口的內容 – Johnny

哦，對不起，我不太明白，我會爲你做一個新的答案！ –

感謝努力亞光。這個效果很好，但是當綠色框變得更大時，它也通過將新的紫色和藍色框推入新的行來殺死佈局。我認爲這是因爲一方面是在100％-150px處修復 – Johnny

如何使該框固定？

回答

相關問題