在媒體查詢之後，Div中心在Safari中不起作用的兩個浮動框之間對齊。

我有一個左和右浮動div。我在中間有一個箱子，它是無浮子的，並且被設置爲在兩個浮子之間居中。如果窗口太小，我想在任何東西下放下正確的div。在媒體查詢之後，Div中心在Safari中不起作用的兩個浮動框之間對齊。

這在Firefox中正常工作，但在safari它最初的作品，但調整大小後失敗。

<div class="wrapper"> 
<div class="left">hey</div> 
<div class="middle">hey</div> 
<div class="right">hey</div>

.wrapper { 
    text-align: center;  
} 

.left { 
    float: left; 
    width: 100px; 
    margin-right: 16px; 
    background: yellow; 
} 

.middle { 
    display: inline-block; 
    margin: 0 auto; 
    width: 200px; 
    background: red; 
} 

.right { 
    clear: both; 
    float: none; 
    margin-left: 0; 
    width: 150px; 
    background: green; 
} 

@media screen and (min-width: 472px) { 
    .middle {float: none;margin: 0 auto;} 
    .right {clear: none;float: right;margin-left: 16px;} 
}

來源

2014-05-05 Alex Lacayo

當我調整它的大小時，綠色框落在紅色和黃色下面。你能發佈你的樣子和你想要的樣子嗎？ –

同樣的問題似乎在Chrome中發生。縮小時，綠色框下降，但不會按比例放大。重新加載時再次好。根據我的經驗，webkit瀏覽器在調整大小時可能會對其媒體查詢有點bug。不要忘記，只有我們的開發人員纔會這樣做測試，沒有真正的用戶像我們一樣玩視口大小。我不會爲瀏覽器錯誤編寫代碼！ – Pevara

@AnindyaBasu是的，當你調整它的大小時，它會下降，但是當你再次調整它的大小時，它不會恢復。 –

.wrapper { 
    text-align: center;  
} 

.left { 
    float: left; 
    width: 100px; 
    margin-right: 16px; 
    background: yellow; 
} 

.middle { 
    display: inline-block; 
    margin: 0 auto; 
    width: 200px; 
    background: red; 
} 

.right { 
    clear: both; 
    display: inline-block; 
    float: left; 
    margin-left: 0; 
    width: 150px; 
    background: green; 
} 

@media screen and (min-width: 472px) { 
    .middle {float: none;margin: 0 auto;} 
    .right {clear: none;float: right;margin-left: 16px;} 
}

設置正確的股利display: inline-block和float:left固定對我來說。 http://jsfiddle.net/bzr49/7/

來源

2014-05-05 22:23:53

謝謝你的！ –

在媒體查詢之後，Div中心在Safari中不起作用的兩個浮動框之間對齊。

回答

相關問題