Question

我在项目中遇到浮动元素的问题，并且在代码诊断之后它变成了这个小提琴：

＆＃13;

#one, #two {
    display:inline-block;
    background: green;
}
#two {
    float:left;
}

@media screen and (max-width: 320px) {
    #one, #two {
        display: block;
        background: red;
        float: none;
    }
}

＆＃13;

<div id="div">
    <span id="one">One</span>
    <span id="two">Two</span>
</div>

＆＃13;

如果您将结果部分的大小调整为小于320px（bg应该变为红色），然后将其重新调回绿色bg，则会出现问题。

浮动元素＆＃34;两个＆＃34;，保留在＆＃34;一个＆＃34; -element开始，调整大小后进入＆＃34;一个＆＃34;。我猜这种情况发生的原因是因为我把它阻挡在＆lt; 320px大小，并且浏览器不明白，在调整大小之后它首先以字符串形式返回，然后才浮动。

我该如何解决？

感谢您的帮助，对不起我的英语。

UPD：我不需要两个元素浮动。只有＆＃34;两个＆＃34;。

UPD2：对不起我的不好解释。让我们澄清一些观点。在实际情况下，我有两个以上的元素，复杂的位置取决于屏幕宽度。元素的顺序很重要，因为结尾的元素会变成块并隐藏在显示移动菜单中。

Answer 1

不要更改display的{{1}}属性，只需将宽度设置为100％。

#one

#one,
#two {
  background: green;
}
#one {
  display: initial;
  display: inline-block;
}
#two {
  float: left;
}
@media screen and (max-width: 320px) {
  #one,
  #two {
    background: red;
  }
  #one {
    width: 100%;
  }
  #two {
    display: block;
    float: none;
  }
}

JSfiddle Demo

Answer 2

如果您希望“两个”总是先出现在小型设备上，那么您可以更改两个位置的位置。然后它会工作

<div id="div">
    <span id="two">Two</span>
    <span id="one">One</span>
</div>

#one, #two {
    display:inline-block;
    background: green;
}
#two {
    float:left;
}

@media screen and (max-width: 320px) {
     #one,#two{
        display: block;
        background: red;
        float: none;

    }
}

Answer 3

你正面临着这个问题，因为你只提到#two而不是#one中的浮动，导致父div不考虑浮动元素#two并将其保留，这就是它在下一行显示的原因为了解决这个问题，我在#two和＃one中添加了float，并且还在父div中添加了float，以便它将考虑内部的浮动子进程

＆＃13;

#one, #two {
    display:inline-block;
    background: green;
    float:left;
}
#div{float:left;width:100%;}

@media screen and (max-width: 320px) {
    #one, #two {
        display: block;
        background: red;
        float: none;
    }
}

＆＃13;

<div id="div">
    <span id="one">One</span>
    <span id="two">Two</span>
</div>

＆＃13;

浮动html元素

3 个答案: