因此，我遇到了试图在移动设备上交换Divs 1和2的问题。 移动订单应以该顺序堆叠为Divs 1、2和3。 然后在768px以上，订单需要在左侧设置为a ...

问题描述 投票：0回答：2
确定我该怎么做。我确实在没有包装器的情况下尝试了一下，但我无法正常工作，这是我最接近的。

有人可以帮我吗？

.container { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 768px) { .container { flex-direction: row; } .specs { flex: 0 0 30%; order: 1; } .content-buttons { flex: 0 0 70%; display: flex; flex-direction: column; gap: 10px; order: 2; } .content { flex: 1; order: 1; } .buttons { flex: 1; order: 2; } } /* Borders for visualization */ .content {border: 1px solid red;} .specs {border: 1px solid green;} .buttons {border: 1px solid blue;}

<div class="container"> <div class="specs">2</div> <div class="content-buttons"> <div class="content">1</div> <div class="buttons">3</div> </div> </div>

	
Desktop-view-Screenshot


Mobile-view-screenshot


html

jquery

css

flexbox

css-grid


2个回答




    
    
    

        

            

                

                    
1
投票

                    
                

            

        

        

live-demo-js-fiddle



注：您的代码问题是，如果我们将1和3分组为单独的DIV，则使用CSS，我们无法在1和3 Div之间插入2然后在1＆3之间附加2个


通过网格延伸系统可以通过在html本身中订购javascript
，
spec，content
divs来解决此问题。我已经删除了Div
button
，并将HTML保持非常简单。

content-buttons


SolutionDesktop视图：
通过使用
<div class="container">
  <div class="specs">2</div>
  <div class="content">1</div>
  <div class="buttons">3</div>
</div>

指定布局
grid-template-columns: repeat(2, 1fr);
来保持-2、1、3之类垂直并移动第3 div以下的第3 div。为此，请参阅桌面视图屏幕截图。

在单行中为第二分区带足够的垂直空间。

grid-row: 1/-1;
用于移动视图的解决方案：
使用
.specs {
  grid-row: 1/-1;
}

将DIVS订单作为-1,2,3一个下方。现在，可以通过使用grid-template-columns: 1fr来保留
specs
类的顺序，并将其用于内容类别
grid-row: 2;
使grid-row: 1div保持在1.
中的顺序1。

content


在下面使用网格的整个解决方案。请确保在JS-Fiddle中进行演示。在这里运行片段有时无法显示布局，请在整页中查看它。




@media only screen and (max-width: 768px) {
.container {
    grid-template-columns: 1fr;
}    

.content {
    grid-row: 1;
}
.specs {
    grid-row: 2;
}
}



.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

.specs {
  grid-row: 1/-1;
}

@media only screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }

  .content {
    grid-row: 1;
  }

  .specs {
    grid-row: 2;
  }
}

/* Borders for visualization */
.content {
  border: 1px solid red;
}

.specs {
  border: 1px solid green;
}

.buttons {
  border: 1px solid blue;
}





    


下面的示例是一个解决方案，没有额外的包装器周围和
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div class="container">
  <div class="specs">2</div>
  <div class="content">1</div>
  <div class="buttons">3</div>
</div>

</html>
。 
注：
.content
的高度完全取决于其内容，并且布局不取决于它。示例中评论了详细信息。在
full页面模式下查看并调整窗口大小以查看布局还原为移动设备（最大宽度：768px）。



.buttons


.specs



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        


    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.