高度不均匀的浮动元素的意外行为

debugcn 发表于 Dev

尼希尔123

我想将高度不均匀的元素“向左”浮动

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

或者，如果您总是要交替浮动边，则可以使用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>

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

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