html - 如何在调整浏览器窗口大小时防止图像文本移动
问题描述
每次我尝试调整浏览器窗口的大小时,img 文本都会开始向右移动,而不是保持在同一位置。
你能帮忙防止这种情况发生吗?
city img{
margin: -5px auto 0;
float: left;
width: 50%;
box-sizing: border-box;
height: auto;
}
.beauty img{
float: right;
height: auto;
max-width: 100%;
}
.container1{
position: relative;
text-align: center;
}
.cityText{
resize: both;
position: absolute;
top: 850px;
left: 480px;
transform: translate(-50%, -50%);
font-size: xx-large;
font-family: oblique;
font-style: oblique;
text-indent: -0.7em;
line-height: 1.5em;
float: left;
height: auto;
box-sizing: border-box;
}
.cityText:hover{
background-color: honeydew;
transition: 2s;
}
.cityText p{
font-size: medium;
text-align: right;
}
.beautyText {
resize: both ;
position: absolute;
top: 810px;
left: 1180px;
transform: translate(-10%, -20%);
font-size: xx-large;
font-family: oblique;
font-style: oblique;
text-indent: -0.7em;
line-height: 1.5em;
text-align: center;
word-wrap:break-word;
}
.beautyText p {
font-size: medium;
text-align: right;
}
.beautyText:hover{
background-color: honeydew;
transition: 2s;
}
<div class="container1">
<div class="city">
<img src="pictures/1.png">
<div class="cityText">
<q>
Life is what happens <br>
when you’re busy<br>
making other plans.</q>
<p>-John Lennon-</p>
</div>
<div class="beauty">
<img src = "pictures/2.jpg">
<blockquote class="beautyText">
<q>
People are like stained - glass windows.
They sparkle and shine when the sun is out,
but when the darkness sets in, their true beauty
is revealed only if there is a light from within.
</q>
<p>-Elisabeth Kubler-Ross-</p>
</blockquote>
</div>
</div>
</div>
每次我尝试调整浏览器窗口的大小时,img
文本都会开始向右移动,而不是保持在同一位置。
你能帮忙防止这种情况吗?
解决方案
只是因为你position: absolute;
使用了像我一样的东西。比较我的代码和你的代码。工作与否?
city img{
margin: -5px auto 0;
float: left;
width: 50%;
box-sizing: border-box;
height: auto;
}
.beauty img{
float: right;
height: auto;
max-width: 100%;
}
.container1{
position: relative;
text-align: center;
}
.cityText{
resize: both;
position: absolute;
top: 850px;
left: 480px;
transform: translate(-50%, -50%);
font-size: xx-large;
font-family: oblique;
font-style: oblique;
text-indent: -0.7em;
line-height: 1.5em;
float: left;
height: auto;
box-sizing: border-box;
}
.cityText:hover{
background-color: honeydew;
transition: 2s;
}
.cityText p{
font-size: medium;
text-align: right;
}
.beautyText {
resize: both;
display: inline-block;
position: relative;
top: 810px;
left: 450px;
transform: translate(-10%, -20%);
font-size: xx-large;
font-family: oblique;
font-style: oblique;
text-indent: -0.7em;
line-height: 1.5em;
text-align: center;
word-wrap: break-word;
width: 100%;
max-width: 300px;
}
.beautyText p {
font-size: medium;
text-align: right;
}
.beautyText:hover{
background-color: honeydew;
transition: 2s;
}
<div class="container1">
<div class="city">
<img src="pictures/1.png">
<div class="cityText">
<q>
Life is what happens <br>
when you’re busy<br>
making other plans.</q>
<p>-John Lennon-</p>
</div>
<div class="beauty">
<img src = "pictures/2.jpg">
<blockquote class="beautyText">
<q>
People are like stained - glass windows.
They sparkle and shine when the sun is out,
but when the darkness sets in, their true beauty
is revealed only if there is a light from within.
</q>
<p>-Elisabeth Kubler-Ross-</p>
</blockquote>
</div>
</div>
</div>
推荐阅读
- javascript - 如何在字符串中显示html标签?
- google-apps-script - Google脚本通过唯一ID查找和更新其他工作表中的行
- javascript - TypeError:在 JSON.stringify 将循环结构转换为 JSON
- google-bigquery - 在 24 小时窗口内为每个唯一用户获取重复数据转换
- java - 使用 RabbitMQ 实现 Push 和 Pull
- javascript - 添加两个数字,其中每个数字以相反的顺序在链表中
- mongodb - Mongo db占用大量虚拟内存
- javascript - 无法验证用户
- azure - 从 Azure 辅助角色记录的错误
- jquery - 如何将 svg 饼图切片更改为从顶部开始并使用 jquery 动态制作顺时针动画