blocks|key|970478|text|虽然不是很漂亮，但处理这一问题的典型方法是使用负边距。如果您在小屏幕和大屏幕上查看下面的代码片段，您将看到所需的顺序。我使用负值和正边距来移动列。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|970479|​|970480|@media+(min-width:+600px)+{
++.column+{
++++float:+left;
++++width:+33.33%25;
++}
++
++.column-right+{
++++margin-left:+66.66%25;
++}
++
++.column-left+{
++++margin-left:+-100%25;
++}
++
++.column-middle+{
++++margin-left:+-66.66%25
++}
}|code-block|syntax|javascript|970481|<div+class="column+column-right">3</div>
<div+class="column+column-left">1</div>
<div+class="column+column-middle">2</div>|970482|970483|大多数响应性网格系统都内置了类似的内容。例如，Bootstrap在使用left和right属性的推和拉类中遵循类似的方法。|offset|length|style|CODE|970484|entityMap^0|0|0|0|0|0|Z|4|14|5|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Y|8|@$N|Z|O|10|P|Q]|$N|11|O|12|P|Q]]|9|@]|A|$]]|$1|R|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|S|$]]

<p>Although not pretty, the typical way to handle this is using negative margins. If you view the snippet below at a small screen vs a large screen, you will see the ordering that you desired. I am using negative and positive margins to move the columns around.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@media (min-width: 600px) {
  .column {
    float: left;
    width: 33.33%;
  }
  
  .column-right {
    margin-left: 66.66%;
  }
  
  .column-left {
    margin-left: -100%;
  }
  
  .column-middle {
    margin-left: -66.66%
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="column column-right"&gt;3&lt;/div&gt;
&lt;div class="column column-left"&gt;1&lt;/div&gt;
&lt;div class="column column-middle"&gt;2&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Most responsive grid systems have something similar built in. For example, Bootstrap follows a similar approach in their push and pull classes using <code>left</code> and <code>right</code> properties.</p>


blocks|key|1025441|text|你可以试试这个基本的技术。也试着熟悉响应式的网页设计。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1025442|​|1025443|div{+
++++border:1px+solid+black;
++++text-align:center;
}
#container{+
++++width:100%25;
++++position:relative;
++++float:left;
++++padding:10px;
}
#container+.item{
++++++width:16%25;
+++++float:left;
+++++padding:50px;
+++++position:relative;
}
/*+CSS3+-+change+divs+width+on+window+resize++*/
@media+screen+and+(max-width:+468px){
++#container+.item{+
++++++++++++++++++width:100%25;+
+++++++++++++++}
}|code-block|syntax|javascript|1025444|<div+id="container">
++++++++<div+class="item">
+++++++++++One
++++++++</div>
++++++++<div+class="item">
+++++++++++Two
++++++++</div>
++++++++<div+class="item">
+++++++++++Three
++++++++</div>
</div>|1025445|1025446|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You can try this basic technique. Also try to get familiar with responsive web design.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div{ 
    border:1px solid black;
    text-align:center;
}
#container{ 
    width:100%;
    position:relative;
    float:left;
    padding:10px;
}
#container .item{
      width:16%;
     float:left;
     padding:50px;
     position:relative;
}
/* CSS3 - change divs width on window resize  */
@media screen and (max-width: 468px){
  #container .item{ 
                  width:100%; 
               }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
        &lt;div class="item"&gt;
           One
        &lt;/div&gt;
        &lt;div class="item"&gt;
           Two
        &lt;/div&gt;
        &lt;div class="item"&gt;
           Three
        &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|967475|text|您可以向右浮动#3+(内容顺序第一)，向左浮动#1和#2。移除屏幕尺寸较小的浮标。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|967476|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You can float #3 (first in content order) to the right, and float #1 and #2 to the left. Remove the floats for smaller screen dimensions.</p>


blocks|key|967488|text|我喜欢使用表组来帮助我处理与文档流相反的困难订单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|967489|小提琴|offset|length|967490|示例|style|BOLD|967491|<ul>
++++<li+class="one">One</li>
++++<li+class="two">Two</li>
++++<li+class="three">Three</li>
</ul>|code-block|syntax|javascript|967492|CSS|967493|ul+{
++display:+table;
++width:+100%25;
}
ul+li+{
++width:+33%25;
++text-align:+center;
++box-sizing:border-box;
}
.two+{
+++display:+table-footer-group;
+++/*+Will+be+displayed+at+the+bottom+*/
+++background-color:+green;
}
.one+{
++display:+table-row-group;
++/*+Will+be+displayed+in+the+middle+*/
++background-color:+yellow;
}
.three+{
++display:+table-header-group;
++/*+Will+be+displayed+at+the+top+*/
++background-color:+lightblue;
}
@media+(min-width:+600px)+{
++ul+li+{
++++float:+left;
++}++++
}|967494|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/knbscu2k/^0|0|0|3|0|0|0|2|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@$D|16|E|17|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|19|8|@$D|1A|E|1B|H|I]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1C|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>I like to use table groups to help me with difficult orderings that go against the flow of the document.</p>

<h2><a href="http://jsfiddle.net/knbscu2k/" rel="nofollow">Fiddle</a></h2>

<p><strong>Example</strong></p>

<pre><code>&lt;ul&gt;
    &lt;li class="one"&gt;One&lt;/li&gt;
    &lt;li class="two"&gt;Two&lt;/li&gt;
    &lt;li class="three"&gt;Three&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>ul {
  display: table;
  width: 100%;
}
ul li {
  width: 33%;
  text-align: center;
  box-sizing:border-box;
}
.two {
   display: table-footer-group;
   /* Will be displayed at the bottom */
   background-color: green;
}
.one {
  display: table-row-group;
  /* Will be displayed in the middle */
  background-color: yellow;
}
.three {
  display: table-header-group;
  /* Will be displayed at the top */
  background-color: lightblue;
}
@media (min-width: 600px) {
  ul li {
    float: left;
  }    
}
</code></pre>


<p>I'm wondering if there's a pure CSS way to stack 3 (or more) divs out of order when they get small enough to stack one on top of the other.  </p>

<p>What I mean is, I have 3 divs in this order</p>

<pre><code>|             |
|[1]  [2]  [3]|
|             |
</code></pre>

<p>I'd like to stack them so they are :</p>

<pre><code>|   |
|[3]|
|[1]|
|[2]|
|   |
</code></pre>

<p>Is there any way in CSS to do this type of stacking? or will I have to use javascript for this?</p>


Responsive design, stacking divs out of order

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想知道是否有一种纯粹的CSS方式来堆叠3(或更多)div，当它们变得足够小时，将一个放在另一个上面。我的意思是，我有3分钱|             ||[1]  [2]  [3]||             |我想把它们堆叠起来：|   ||[3]||[1]||[2]||   |在CSS中有任何方法来进行这种堆叠吗...

问响应性设计，堆叠div无序
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应性设计，堆叠div无序EN