如何在调整浏览器大小时防止图像文本移动 window

Question

每次我尝试调整浏览器 window 的大小时，img 文本都会开始向右移动，而不是停留在同一个 position 中。

你能帮忙防止这种情况发生吗？

 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>

每次我尝试调整浏览器 window 的大小时， img文本都会开始向右移动，而不是停留在同一个 position 中。

你能帮忙防止这种情况吗？

Answer 1

只是因为您使用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>