如何在html中使文本响应？

Question

我有以下代码：

.aligned { 
            display: flex; 
            align-items: top; 
        } 
.p{
            padding: 15px; 
}

@media screen and (max-width: 375px) {
  .aligned {
    display: inline;
    top: 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 src="https://previews.123rf.com/images/lekanto/lekanto1708/lekanto170800012/84171612-country-road-leading-to-the-forest-morning-picutre-made-during-sunrise-.jpg" align="left" width="370" height="500">

  <div class="aligned">
    <div class="p">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
       
          <blockquote>
          Nothing Is Impossible. The Word Itself Says 'IM Possible'
          <cite>Audrey Hepburn</cite>
           </blockquote>
           
        </div>

因此，当您运行上面的代码时，我希望代码的格式完全相同，并且当用户在大屏幕上查看代码时，所有内容都完全相同，但在手机/平板电脑或任何更小的设备上, 这应该是我的预期输出：

我知道此图像中的输出与我的代码中的文本和图像不匹配，但它本质上是相同的想法。

在手机/​​平板电脑/较小的设备上，我希望图片放在顶部，文字放在正下方

在更大的设备上，我希望输出是上面代码的内容

似乎是什么问题：我添加了一个aligned 类以使文本在图像旁边对齐，但如果您想要响应，它似乎不起作用。我该如何解决？

Answer 1

我们可以先决定在宽设备上应该是什么样子吗？目前，图像元素被赋予了与实际图像纵横比不对应的固定尺寸，并且还使用了“旧”属性 align。

我建议我们坚持使用 CSS 并说，也许在更宽的屏幕上，图像应该占据 n% 的宽度。您可以决定 n 的值并根据需要设置不同的断点，但是让图像在 376px 视口上占用 360px 宽度是没有意义的，这就是现在会发生的情况 - 需要有一个合理的留给文本的空间量。

CSS 属性 float 旨在允许图像与文本一起“浮动”。所以float:left 会把图片放在左边，后面的任何文字都会使用右边的空间，如果太长就会放在图片下面。

对于小型设备，将图像和文本并排放置是没有意义的，我们可以让图像占据视口宽度的 100%，而文本将位于其下方。

以这种方式使用 float（它的设计目的）似乎也不需要 flex。

这里是简化的 sn-p 帮助您入门 - 您可能想要更改媒体断点以具有不同的图像宽度百分比。

.p{
            padding: 15px; 
}

img{
border-sizing: border-box;
width: 30%;
border: 5px solid #555;
float: left;
  margin-right: 10px;
}
@media screen and (max-width: 375px) {
  img {
    width: 100%;
  }
}
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 src="https://previews.123rf.com/images/lekanto/lekanto1708/lekanto170800012/84171612-country-road-leading-to-the-forest-morning-picutre-made-during-sunrise-.jpg">

           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
       
          <blockquote>
          Nothing Is Impossible. The Word Itself Says 'IM Possible'
          <cite>Audrey Hepburn</cite>
           </blockquote>
           
        </div>

Answer 2

你试过“列”中的“flex”吗？

@media screen and (max-width: 375px) {
  .aligned {
    display: flex;
    flex-flow: column;
  }
}