我想让高度不均匀的元素“向左” float
<html>
<head>
<style>
span {
float: left;
width: 50%;
text-align: center;
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div>
<span>I am long text so i may take long space vbjkhkj hkjhjkhjkh jkghkjgk gjhfgjhykf yjf kfgkuyrfkyfkrf ytgk tygy kry kr ykut kutuktuy ruykt kutkuyykut yufkytrky utkt r tykutg kyuyuktykytr ktykuyt,ytktytg kyutukyrtyryrrryryu ryuryuryryu ryuryurtyukrerrukrkr r67rtr87</span>
<span>Hello2</span>
<span>Hello3</span>
<span>Hello4</span>
<span>Hello5</span>
</body>
</html>我想在长文本下方的左侧显示“Hello3”，但它出现在大文本之后，
我想在右侧显示“Hello4”，在左侧显示“Hello5”，
抱歉英语不好
谢谢。
最佳答案
您可以创建两个单独的类，一个将元素向左浮动，另一个将元素向右浮动:
<html>
<head>
<style>
span {
width: 50%;
text-align: center;
}
.float-left {
float: left;
clear: left;
}
.float-right {
float: right;
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div>
<span class="float-left">I am long text so i may take long space vbjkhkj hkjhjkhjkh jkghkjgk gjhfgjhykf yjf kfgkuyrfkyfkrf ytgk tygy kry kr ykut kutuktuy ruykt kutkuyykut yufkytrky utkt r tykutg kyuyuktykytr ktykuyt,ytktytg kyutukyrtyryrrryryu ryuryuryryu ryuryurtyukrerrukrkr r67rtr87</span>
<span class="float-right">Hello2</span>
<span class="float-left">Hello3</span>
<span class="float-right">Hello4</span>
<span class="float-left">Hello5</span>
</div>
</body>
</html>或者，如果你总是要交替 float 边，你可以使用 nth-child 选择器并删除类:
<html>
<head>
<style>
span {
width: 50%;
text-align: center;
}
.container span:nth-child(odd) {
float: left;
clear: left;
}
.container span:nth-child(even) {
float: right;
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<span>I am long text so i may take long space vbjkhkj hkjhjkhjkh jkghkjgk gjhfgjhykf yjf kfgkuyrfkyfkrf ytgk tygy kry kr ykut kutuktuy ruykt kutkuyykut yufkytrky utkt r tykutg kyuyuktykytr ktykuyt,ytktytg kyutukyrtyryrrryryu ryuryuryryu ryuryurtyukrerrukrkr r67rtr87</span>
<span>Hello2</span>
<span>Hello3</span>
<span>Hello4</span>
<span>Hello5</span>
</div>
</body>
</html>编辑:如果您想要一个类似网格的系统，您可以使用flex，并在您的 HTML 中创建行/列:
<html>
<head>
<style>
span {
width: 50%;
text-align: center;
}
.row {
display: flex;
justify-content: space-between;
}
.row span {
flex: 1;
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<div class="row">
<span>I am long text so i may take long space vbjkhkj hkjhjkhjkh jkghkjgk gjhfgjhykf yjf kfgkuyrfkyfkrf ytgk tygy kry kr ykut kutuktuy ruykt kutkuyykut yufkytrky utkt r tykutg kyuyuktykytr ktykuyt,ytktytg kyutukyrtyryrrryryu ryuryuryryu ryuryurtyukrerrukrkr r67rtr87</span>
<span>Hello2</span>
</div>
<div class="row">
<span>Hello3</span>
<span>Hello4</span>
</div>
<div class="row">
<span>Hello5</span>
<span></span>
</div>
</div>
</body>
</html>关于javascript - 高度不均匀的 float 元素的意外行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55196088/