在响应式模式下，我如何使按钮在段落后显示？

huangapple
go评论62阅读模式
英文:

How can I make the button appear after the paragraph in responsive mode?

问题

我在制作一个页面，其中包括介绍文本和右侧的按钮。在桌面上看起来还可以，但是在响应式模式下，我想将按钮移动到介绍文本下方。我该如何做？以下是我的想法。我还提供了一个到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="微笑脸" style="float:right;">
        介绍文本：

        我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是正确的！我是正确的！我是正确的！我是正确的！我是正确的！tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
    </div>
</div>
英文:

I'm working on a page with an introduction text and a button on the right. It looks ok on desktop, however I'd like to move the button below the intro text in responsive mode. How can I go about doing that? Here's what I came up with. I've also provided a link to jsfiddle here: https://jsfiddle.net/tpeob5a6/1/

Thanks for your time.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;1&quot;&gt;
&lt;img src=&quot;http://www.google.com/images/srpr/logo3w.png&quot; alt=&quot;Smiley face&quot; style=&quot;float:right;&quot;&gt;
Intro text:

I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

你需要使用@media选择器来指定从flex-direction: row切换到column的断点。

.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!!! 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!!! 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!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
    </p>
  </div>
</div>

编辑：更改媒体宽度以便更容易演示。

英文:

You'll want to use the @media selector to specify the breaking point for when you want to go from flex-direction: row to column

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
  }
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;div1&quot;&gt;
    &lt;img src=&quot;http://www.google.com/images/srpr/logo3w.png&quot; alt=&quot;Smiley face&quot;&gt;
    &lt;p&gt;
      Intro text: I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg
      fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!!
      tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!!
      I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!!
      I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!!
      I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!!
      I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

EDIT: changed media width to make it easier to demo

答案2

得分: 0

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

jsFiddle演示

.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;">
    介绍文本：

    我是对的！！！我是对的！！！我是对的！！！我是对的！！！我是对的！！！
    tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是对的！！！
    我是对的！！！我是对的！！！我是对的！！！我是对的！！！
    tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是对的！！！
    我是对的！！！我是对的！！！我是对的！！！我是对的！！！
    tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是对的！！！
    我是对的！！！我是对的！！！我是对的！！！我是对的！！！
    tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是对的！！！
    我是对的！！！我是对的！！！我是对的！！！我是对的！！！
    tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是对的！！！
    我是对的！！！我是对的！！！我是对的！！！我是对的！！！
    tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是对的！！！
    我是对的！！！我是对的！！！我是对的！！！我是对的！！！
    tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt 我是对的！！！
    我是对的！！！我是对的！！！我是对的！！！我是对的！！！
    tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
  </div>
</div>

此外，避免使用数字作为类值的开头，可能会导致浏览器忽略它。请参考我的答案：https://stackoverflow.com/a/31773673/3597276

英文:

You can use a media query and set the button to appear after the text using the order property.

jsFiddle demo

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

@media (max-width: 750px) {

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

  img {
    order: 1
  }
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;1&quot;&gt;
&lt;img src=&quot;http://www.google.com/images/srpr/logo3w.png&quot; alt=&quot;Smiley face&quot; style=&quot;float:right;&quot;&gt;
Intro text:

I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! I&#39;m riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

Also, avoid using numbers to start a class value. You may find that browsers ignore it. See my answer here: https://stackoverflow.com/a/31773673/3597276

huangapple
  • 本文由 发表于 2023年6月22日 04:16:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76526840.html
  • css
  • flexbox
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定