【发布时间】：2021-09-15 19:38:10
【问题描述】：
我有以下代码：
.aligned {
display: flex;
align-items: top;
}
.p {
padding: 15px;
}
img {
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
img {
display: block;
margin: 0 auto;
max-width: 80%;
height: auto;
}
@media all and (min-width: 768px) {
img {
float: left;
height: 200px; /* image height for larger screen only */
}
}<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>所以当你运行上面的代码时，在一个新的页面上打开它，你可以看到对齐是这样的：
在我看来，它看起来像这样，但是当我缩小我的网站时，这是我得到的输出：
抱歉照片模糊
这就是我缩小时的输出。我不希望这样，有没有办法让它成为静态的，这意味着即使我缩小，我发送的上述代码的输出也不会改变？
即使你运行上面的代码，在一个新的页面上打开它，然后缩小，你也可以看到文字和图片来改变它的位置。但是，我希望它们是静态的，这意味着根本不会改变。有什么建议吗？
更新
为了更好地理解我在寻找什么，这是我将页面缩小到 33% 时得到的输出：
如您所见，文本和图像向左移动，这不是我想要的。我希望他们留在原来的位置。
【问题讨论】：
-
@hossainomer 您是否尝试过使用媒体查询w3schools.com/cssref/css3_pr_mediaquery.asp ？
-
媒体查询已被用于使其具有响应性，我如何使用它使图像+文本保持静态而不在缩小时更改？
-
关于媒体查询：如果屏幕宽度大于 X，那么容器宽度应该为 100px（例如）有意义吗？按容器宽度表示包含文本和图像的 div
-
你能告诉我吗？
-
我没有注意到对齐方式的差异。你能帮忙澄清一下吗？
标签： javascript html jquery css image