gpt4 book ai didi

css - div 在大型设备上左对齐和右对齐,在小型设备上堆叠

转载 作者:行者123 更新时间:2023-11-28 16:33:41 25 4
gpt4 key购买 nike

<分区>

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

在更大的设备上

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

在小型设备上

  1. 将 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 代码中的内联示例)

是否可以左/右对齐内联 block div?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com