div 在大型设备上左右对齐，堆叠在小型设备上 [重复]

Posted 2023-03-06

【中文标题】div 在大型设备上左右对齐，堆叠在小型设备上 [重复]

【英文标题】：div left and right-aligned on large devices, stacked on small [duplicate]

【发布时间】：2016-04-26 17:27:33

【问题描述】：

有没有办法在不使用引导网格的情况下：

在更大的设备上

div.left 在 .header-wrapper 中左对齐 div.right 在 .header-wrapper 中右对齐

在小型设备上

将 div.left 和 div.right 堆叠在一起

JSfiddle

<div class="container">
  <div class="header-wrapper">

    <div class="left"> This is some longer text that may not fit in-line with buttons</div>
    <div class="right">
      <a type="button" class="btn btn-default">Table</a>
      <a type="button" class="btn btn-default">Charts</a>
    </div>
  </div>

  <p>Some content here</p>

  <div class="header-wrapper">
    <div class="in-line">
      This would be an inline example
    </div>
    <div class="in-line">
      Divs will stack without media queries
    </div>
  </div>
</div>

没有媒体查询可以吗？ 例如在 .left .right 上使用 inline-block 将负责堆叠。 （参见 html 代码中的内联示例）

是否可以左/右对齐内联块 div？

【问题讨论】：

查看 CSS 媒体查询，这就是引导网格的作用；)

参考这个答案：***.com/questions/6370690/…

是的 - 编写您自己的 CSS 和媒体查询。你基本上是通过写这个问题为这个过程编写了伪代码。

我知道我在这里重复每个人，但使用媒体查询。您可以在webdesignerwall.com/tutorials/… 找到教程。或者，您可以使用基础或 w3.css。您可以在w3schools.com

找到适合这些人的教程

将左/右列向左浮动，宽度为 50%。当您达到小屏幕宽度时，使用媒体查询将宽度设为 100%。

【参考方案1】：

我可能不明白你在说什么，所以我使用了一个小 flexbox 和一个媒体查询，它看起来像 我认为你想要的。如果没有，请告诉我。顺便说一句，我曾经讨厌媒体查询，因为它的语法很奇怪而且闻起来很有趣，但我得出的结论是，它们在这里是有充分理由的。

http://jsfiddle.net/zer00ne/p7rbpuac/

变化

.header-wrapper 
  border: 1px solid green;
  display: flex;
  justify-content: space-between;


 @media screen and (max-width:360px) 
   .header-wrapper 

  display: flex;
  flex-direction: column;
  justify-content: center;
  
 

【参考方案2】：

正如其他人所说，您需要使用媒体查询。

试试这个（显然可以根据自己的喜好更改尺寸）：

.header-wrapper  width: 100%; 
.header-wrapper > div  width: 200px; height: 50px; 
.left  background: blue; float: left; 
.right  background: red; float: right; 

@media screen and (max-width: 768px )  
   .right  
      float:left; 
      clear: left; 
    

在小于 769 像素的屏幕上，带有 .right 类的框将应用 float: left;，这将导致它向左浮动。 clear: left; 将使其堆叠在具有类 .left 的 div 下方。