css 如何在响应模式下使按钮出现在段落之后?

dldeef67  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(85)

我正在写一个页面,上面有一个介绍文本,右边有一个按钮。在桌面上看起来不错,但是我想在响应模式下移动介绍文本下面的按钮。我该怎么做呢?这是我想到的我还在这里提供了jsfiddle的链接:https://jsfiddle.net/tpeob5a6/1/
谢谢你的时间。

.container {
display: flex;
flex-wrap: nowrap;
}
<div class="container">
<div class="1">
<img src="http://www.google.com/images/srpr/logo3w.png" alt="Smiley face" style="float:right;">
Intro text:

I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
</div>
</div>
zvokhttg

zvokhttg1#

您可以使用媒体查询并使用order属性将按钮设置为显示在文本之后。
jsFiddle demo

.container {
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 750px) {

  .container > div {
    display: flex;
    flex-direction: column;
  }

  img {
    order: 1
  }
}
<div class="container">
  <div class="1">
    <img src="http://www.google.com/images/srpr/logo3w.png" alt="Smiley face" style="float:right;">
    Intro text:

    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
  </div>
</div>

另外,避免使用数字作为类值的开头。您可能会发现浏览器会忽略它。在这里看到我的答案:https://stackoverflow.com/a/31773673/3597276

6l7fqoea

6l7fqoea2#

您将需要使用@media选择器指定从flex-direction: rowcolumn的断点

.container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

img {
  float: right;
}

@media screen and (max-width: 600px) {
  .div1 {
    display: flex;
    flex-direction: column;
  }
  img {
    display: flex;
    flex-direction: column-reverse;
    order: 2;
  }
}
<div class="container">
  <div class="div1">
    <img src="http://www.google.com/images/srpr/logo3w.png" alt="Smiley face">
    <p>
      Intro text: I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg
      fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
      tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
      I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
      I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!!
      I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!!
      I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
    </p>
  </div>
</div>

编辑:更改了媒体宽度,使其更容易演示

相关问题