浮動股利的權利時，屏幕很寬，當疊加屏幕窄

粉紅色的DIV總是整個視。
粉紅色div的文字始終居中在視口中。
當屏幕「足夠寬」時，藍色的div浮到右側。
當屏幕不是「足夠寬」時，藍色div會疊加在粉紅色div下面。
藍色div跨越視口，其堆疊時其文本居中。
該解決方案應該是純CSS。

這是我目前的合格：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#parent { 
    position: relative; 
    background-color: white; 
    width: 100%; 
    height: 20px; 
} 
#center { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    margin: auto; 
    background-color: pink; 
    text-align: center; 
} 
#placeholder { 
    position: relative; 
    height: 20px; 
    width: 500px; 
} 
#right { 
    position: relative; 
    float: right; 
    background-color: blue; 
} 
</style> 
</head> 
<body> 
<div id="parent"> 
    <div id="center">This text should always be centered in the VIEWPORT</div> 
    <div id="right">this text should float to the right</div> 
    <div id="placeholder"></div> 
</div> 
</body> 
</html>

下面是它目前看起來，當屏幕寬（正確的），如：

wide

這裏是什麼樣子時，屏幕很窄（不正確）：

narrow

下面是它應該是什麼的時候，屏幕狹小，如：

narrow goal

來源

2015-09-16 JoeyJoeJoeJuniorShabadoo

使用媒體查詢根據屏幕大小http://www.w3schools.com/cssref/css3_pr_mediaquery.asp –

我知道這種可能性進行調整CSS。在你的估計中，是否是目前處理這種佈局問題的標準方法？ – JoeyJoeJoeJuniorShabadoo

您正在尋找這樣的事情？ https://jsfiddle.net/DIRTY_SMITH/v7k4oky8/4/

進行適當的文本編輯小提琴對齊

body{margin: 0;} 
    #parent { 
     position: relative; 
     background-color: white; 
     width: 100%; 
     height: 20px; 
    } 
    #center { 
     float: left; 
     margin: auto; 
     width: calc(100% - 500px); 
     background-color: pink; 
     padding-left: 250px; 
    } 
    #right { 
     float: left; 
     background-color: blue; 
     width: 250px; 
    } 
    @media (max-width: 610px){ 
     #right {width: 100%; text-align: center;} 
     #center {width: 100%;} 
    }

來源

2015-09-16 15:59:24

你又打敗了我呢Adam haha +1 –

我不認爲這實際上是正確的。如果縮小屏幕，粉色div中的文本不會保持居中在視口中。我相信{position：absolute; top：0;底部：0;正確：0;左：0;保證金：汽車;訣竅是必要的。 – JoeyJoeJoeJuniorShabadoo

@JoeyJoeJoeJuniorShabadoo它取決於，你想它中心到屏幕或粉紅色的盒子，我可以做這兩種使用這種方法 –

-1

這裏是我的解決方案。我不知道這是否最好。首先，它要求你設置明確的高度。根據我在某處閱讀的最佳做法，我設置了移動設備的默認設置，併爲大屏幕設置了默認設置。我注意到，如果你把它放在JSFiddle中，它不能正常工作，但如果你在瀏覽器中使用它（只測試Firefox），它會發揮作用。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body{margin: 0;} 
#parent { 
    position: relative; 
    width: 100%; 
    height: 40px; 
    text-align:center; 
} 
#center { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    margin: auto; 
    background-color: pink; 
} 
#right { 
    position: absolute; 
    top: 20px; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    margin: auto; 
    background-color: #00FFFF; 
} 
@media only screen and (min-width: 480px) { 
    #parent { 
     height: 20px; 
    } 
    #right { 
     position: relative; 
     float: right; 
     top: 0; 
    } 
} 
</style> 
</head> 
<body> 
<div id="parent"> 
    <div id="center">This text should always be centered in the VIEWPORT</div> 
    <div id="right">this text should float to the right</div> 
</div> 
</body> 
</html>

來源

2015-09-16 17:29:26 JoeyJoeJoeJuniorShabadoo

我想知道爲什麼這是次優。 – JoeyJoeJoeJuniorShabadoo

浮動股利的權利時，屏幕很寬，當疊加屏幕窄

回答

相關問題