屏幕宽时将div向右浮动，屏幕窄时堆叠答案

【问题标题】：Float a div to the right when screen is wide, stack when screen is narrow屏幕宽时将div向右浮动，屏幕窄时堆叠
【发布时间】：2015-09-17 01:29:26
【问题描述】：

在下面的代码中，我希望满足以下条件：

粉红色的 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>

这是当前屏幕宽时的样子（正确）：

这是屏幕窄时的样子（不正确）：

这是窄屏时的样子：

【问题讨论】：

使用媒体查询根据屏幕大小调整css w3schools.com/cssref/css3_pr_mediaquery.asp
我确实知道这种可能性。在您看来，这是目前处理此类布局问题的标准方法吗？

标签： html css

【解决方案1】：

您正在寻找这样的东西吗？ 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%;}
    }

【讨论】：

你又打败了我亚当哈哈+1
我认为这实际上是不正确的。如果缩小屏幕，粉红色 div 中的文本不会在视口中保持居中。我相信{位置：绝对；顶部：0；底部：0；右：0；左：0；边距：自动； } 技巧是必要的。
@JoeyJoeJoeJuniorShabadoo 这取决于，你想让它居中于屏幕还是粉红色的盒子，我可以用这个方法来做这两种方法
@JoeyJoeJoeJuniorShabadoo 看看这个小提琴jsfiddle.net/DIRTY_SMITH/v7k4oky8/5
这给了我一些非常有用的见解，但是文本不在视口中居中。使用这种策略，文本开始前有 250px 和 250px + 文本结束到右侧 div 开始的距离。为了更好地看到这种效果，请将中心 div 中的文本更改为简短的内容。

【解决方案2】：

这是我的解决方案。我不知道这是否是最好的。一方面，它要求您设置明确的高度。根据我在某处阅读的最佳实践，我为移动设备设置了默认值，并为大屏幕进行了更改。我注意到如果你把它放在 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>

【讨论】：

我很想知道为什么这是次优的。