Question

我要浮动高度不均匀的元素“ left”

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

抱歉英语不好

谢谢。

Answer 1

您可以创建两个单独的类，一个将元素浮动到左侧，另一个将元素浮动到右侧：

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

Answer 2

如果您不需要float: left，则可以使用CSS Grid。

这两列将使用可用空间，因此它们的宽度为50％。有关grid-template-columns的MDN的更多信息。

<html><head>
<style>
div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
span {
  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>
</div>
</body>
</html>

Answer 3

我只能建议您使用flexbox模型。

<div style="display: flex; justify-content: space-between;">
  <div>
    This content will stick to the left
  </div>
  <div>
    This content will stick to the right
  </div>
</div>

Working fiddle使用Tailwind CSS库

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

3 个答案: