css 屏幕宽时使div向右浮动，屏幕窄时堆栈

smdncfj3 于 2022-12-01 发布在其他

关注(0)|答案(3)|浏览(123)

在下面的代码中，我希望满足以下条件：
1.粉红色的div始终跨越视口。
1.粉红色div的文本始终在视口中居中。
1.当屏幕“足够宽”时，蓝色div会向右浮动。
1.当屏幕不是“足够宽”时，蓝色div堆叠在粉红色div下面。
1.蓝色div跨越视区，其文本在堆叠时居中。
1.解决方案应该是纯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

来源：https://stackoverflow.com/questions/32612964/float-a-div-to-the-right-when-screen-is-wide-stack-when-screen-is-narrow

3条答案

按热度按时间

wljmcqd81#

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

赞(0）回复(0）举报 2022-12-01

k4ymrczo2#

这对我来说已经起作用了，让一个旋转的图像保持在屏幕每一边的相同位置。调整左/右和顶部来定位每一边的每个div。

<div class="col" style="overflow: none; z-index: 9999;">
    <div id="spinning-circle" class="row" style="position:absolute; top:750px; left:-25px; z-index:1; width: auto!important;">
        <img src="../certdb/images/left-bubble.png">
    </div>
    <div id="spinning-circle" class="row" style="position:absolute; top:250px; right:-145px; z-index:1; width: auto!important;">
        <img src="../certdb/images/right-bubble.png">
    </div>
</div>

正文-〉

.Site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

页面容器-〉

.Site-content {
    flex: 1;
    margin: auto;
    margin-top: 5%;
    max-width: 1500px;
    min-height: 80%;

https://jsfiddle.net/znLv6peg/11/

赞(0）回复(0）举报 2022-12-01

ia2d9nvy3#

这是我的解决方案。我不知道这是否是最好的。首先，它需要你设置显式的高度。我为移动设备设置了默认值，并根据我在某个地方读到的最佳实践为大屏幕进行了修改。我注意到，如果你把它放在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>

赞(0）回复(0）举报 2022-12-01

我来回答

css 屏幕宽时使div向右浮动，屏幕窄时堆栈

3条答案

相关问题

热门标签

最新问答