Question

说我有2个div设置了这样的内容

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

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

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


.div1{
    float:left;
}

.div2{
    float:right;
}

据我了解，它们在调整大小后会移动，但div2将继续向右浮动：

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

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

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

css支持是否将对齐方式更改为左侧？

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

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

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

我对术语的理解不够正确，无法在Google上找到答案。

Answer 1

我想您需要媒体查询吗？

@media (max-width:1024px) {
  .div2{
    float:none;
  }
}

更多信息，请点击此处：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

我认为您正在寻找它。flexwrap将使第二个div向下移动

<style>
.parent
   {
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
    }
.div1,.div2{
 width:46%;}
</style>
<div class="parent">
<div class="div1">
</div>
<div class="div2">
</div>

Answer 3

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

在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>

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

3 个答案: