是否可以在调整大小后更改 div 设置为浮动的一侧?

丹布茨

假设我有 2 个 div 设置了这样的东西

|------------------------------|

| div1 ------------------ div2 |

|------------------------------|


.div1{
    float:left;
}

.div2{
    float:right;
}

据我了解,它们会在调整大小时移动,但 div2 将继续向右浮动:

|--------------------|

| div1 ------------- |

|--------------- div2|

css 是否支持更改向左对齐?

|---------------------|

| div1 -------------- |

| div2 ---------------|

我的术语不够正确,无法在谷歌上找到答案。

故事

您要执行的操作需要使用媒体查询。这真的很简单。

在您的 css 中,您将按以下方式构建您的样式。https://getbootstrap.com/docs/4.0/layout/overview/

@media (min-width: 576px) { .div1 {float:left}; .div2 {float:left} }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { .div1 {float:left}; .div2 {float:left} }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { .div1 {float:left}; .div2 {float:right} }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { .div1 {float:left}; .div2 {float:right} }

你标记了 bootstrap-4 所以这里是关于如何在框架内使用它的文档。https://getbootstrap.com/docs/4.0/utilities/float/

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

根据视图宽度和你的好去应用你需要的类。

<div class="float-sm-left">content here</div>
<div class="float-sm-left float-md-right">content here</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

是否可以垂直对齐设置为在右侧浮动的div?

来自分类Dev

div 一侧的多色边框

来自分类Dev

浮动后将浮动Div宽度调整为100%

来自分类Dev

如何倾斜div的一侧然后复制并倾斜另一侧?

来自分类Dev

div .height()在调整大小后更改,而无需告知

来自分类Dev

在浏览器根据文本长度和字体大小调整大小后更改 div 的高度是一个好主意吗?

来自分类Dev

如何找到div的哪一侧被单击?

来自分类Dev

如何在一侧制作2个div(上下)

来自分类Dev

CSS将箭头放在Box(div)的每一侧

来自分类Dev

绝对100%宽度div溢出一侧

来自分类Dev

一侧偏斜div的所有边框

来自分类Dev

调整大小后div移动

来自分类Dev

是否可以在不使用JavaScript的情况下在窗口调整大小上调整div的大小?

来自分类Dev

是否可以在不使用JavaScript的情况下在窗口调整大小上调整div的大小?

来自分类Dev

仅使用一个div倾斜一侧的div边框

来自分类Dev

在 div 的另一侧叠加一个 div

来自分类Dev

更改DIV中的文本后,无法使用jquery调整DIV的大小

来自分类Dev

当调整力度时,Tmux从一侧分离

来自分类Dev

如何将子div沿父div的每一侧居中

来自分类Dev

如何相对于div在div的任一侧垂直居中两个跨度?

来自分类Dev

CSS 如何在父 div 的每一侧放置 4 个 div

来自分类Dev

div大小自动调整为内容

来自分类Dev

在div内调整Div的大小,并设置动态高度

来自分类Dev

LED显示器的一侧是否应该变热?

来自分类Dev

在GNOME中捕捉到屏幕的一侧将禁用窗口的大小调整

来自分类Dev

UWP CalendarView在调整大小后一年更改

来自分类Dev

调整大小后浮出div的图像

来自分类Dev

javascript preappend将新的div加载到另一个的一侧

来自分类Dev

发送方通道一侧的MQ是否验证接收方通道一侧的MQ证书?

Related 相关文章

  1. 1

    是否可以垂直对齐设置为在右侧浮动的div?

  2. 2

    div 一侧的多色边框

  3. 3

    浮动后将浮动Div宽度调整为100%

  4. 4

    如何倾斜div的一侧然后复制并倾斜另一侧?

  5. 5

    div .height()在调整大小后更改,而无需告知

  6. 6

    在浏览器根据文本长度和字体大小调整大小后更改 div 的高度是一个好主意吗?

  7. 7

    如何找到div的哪一侧被单击?

  8. 8

    如何在一侧制作2个div(上下)

  9. 9

    CSS将箭头放在Box(div)的每一侧

  10. 10

    绝对100%宽度div溢出一侧

  11. 11

    一侧偏斜div的所有边框

  12. 12

    调整大小后div移动

  13. 13

    是否可以在不使用JavaScript的情况下在窗口调整大小上调整div的大小?

  14. 14

    是否可以在不使用JavaScript的情况下在窗口调整大小上调整div的大小?

  15. 15

    仅使用一个div倾斜一侧的div边框

  16. 16

    在 div 的另一侧叠加一个 div

  17. 17

    更改DIV中的文本后,无法使用jquery调整DIV的大小

  18. 18

    当调整力度时,Tmux从一侧分离

  19. 19

    如何将子div沿父div的每一侧居中

  20. 20

    如何相对于div在div的任一侧垂直居中两个跨度?

  21. 21

    CSS 如何在父 div 的每一侧放置 4 个 div

  22. 22

    div大小自动调整为内容

  23. 23

    在div内调整Div的大小,并设置动态高度

  24. 24

    LED显示器的一侧是否应该变热?

  25. 25

    在GNOME中捕捉到屏幕的一侧将禁用窗口的大小调整

  26. 26

    UWP CalendarView在调整大小后一年更改

  27. 27

    调整大小后浮出div的图像

  28. 28

    javascript preappend将新的div加载到另一个的一侧

  29. 29

    发送方通道一侧的MQ是否验证接收方通道一侧的MQ证书?

热门标签

归档