浮動左，最大寬度和流量控制

理想情況下，我想要一個可變寬度左側面板16至30之間和右側面板固定在16em寬。當屏幕縮小到32em或更小時，我想讓右側面板在左側下方流動。我希望這一切都左對齊。浮動左，最大寬度和流量控制

我已經找到了幾個並排的例子，但只有一個固定寬度的左邊浮動它和可變右側面板，或浮動右側和變量左側面板。我設法把一個外面的東西放在一個圓形的東西上，並且使佈局正確地工作，直到我想讓左邊的右邊的面板（或者右邊的左邊 - 我沒有碰到它）：

我使用@media (min-width: 15em)和築巢有一些變化，因爲基本上當屏幕小於.left:min-width + .right:min-width我只需要拿出浮動嘗試：權面板上，但似乎沒有生效（I」我不確定它是否應該在jsfiddle中，但它也不在我的真實示例中。我不介意哪個面板在另一個面板下彈出，但我只需要它適用於具有標準CSS的移動設備 - 我還有其他東西當屏幕達到72ems等時有效，但我沒有'噸寫:) :)

任何幫助非常感謝。

來源

2014-01-19 Nigel Johnson

它解決了你的問題嗎？ –

是的，基於我的原始文章沒有保證金它做到了。當我加入保證金時，我必須記得把它拿出來。 –

使用此媒體查詢。

@media (max-width: 15em) 
{ 
    .right { 
     width: auto; 
     float:none; 
    } 
}

來源

2014-01-19 10:49:04

enter code here這個問題問在＃1上：
What does @media screen and (max-width: 1024px) mean in CSS?
查看本頁面：
http://www.w3schools.com/css/css_mediatypes.asp
媒體屏幕對於所有瀏覽器和活動

/* Smartphones (portrait and landscape) ----------- */ 
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) { 
    /* Styles */ 
    } 

    /* Smartphones (landscape) ----------- */ 
    @media only screen 
    and (min-width : 321px) { 
    /* Styles */ 
    } 

    /* Smartphones (portrait) ----------- */ 
    @media only screen 
    and (max-width : 320px) { 
    /* Styles */ 
    } 

    /* iPads (portrait and landscape) ----------- */ 
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) { 
    /* Styles */ 
    } 

    /* iPads (landscape) ----------- */ 
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) { 
    /* Styles */ 
    } 

    /* iPads (portrait) ----------- */ 
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) { 
    /* Styles */ 
    } 

    /* Desktops and laptops ----------- */ 
    @media only screen 
    and (min-width : 1224px) { 
    /* Styles */ 
    } 

    /* Large screens ----------- */ 
    @media only screen 
    and (min-width : 1824px) { 
    /* Styles */ 
    } 

    /* iPhone 4 ----------- */ 
    @media 
    only screen and (-webkit-min-device-pixel-ratio : 1.5), 
    only screen and (min-device-pixel-ratio : 1.5) { 
    /* Styles */ 
    }

來源

2014-01-19 10:54:59

謝謝Alexanderi，這是一個很好的參考，我也讀過這個。 CSS對我來說仍然是一種黑暗的藝術，雖然我可以用它們中最好的顏色，填充和字體，但我知道我有更多的問題，而不是我的小問題的答案。 –

基於艾倫的一個nswer我更新了我的小提琴，試圖找出我在做什麼錯

http://jsfiddle.net/Ph3S8/3/

我必須移動保證金和浮到媒體選擇如下：

@media (min-width:17em) { 
    .right { 
     float:right; 
    } 
    .left { 
     margin-right:5em; 
    } 
}

對於某些原因，我必須在選擇器或div的重疊區域添加2 em的填充。

無論如何，我發佈這個作爲澄清我原來的帖子，艾倫的答案比我的好。

來源

2014-01-19 11:06:20

浮動左，最大寬度和流量控制

回答

相關問題