时间戳

首页 > 解决方案 > 如何根据元素的宽度将元素定位在彼此下方

javascript - 如何根据元素的宽度将元素定位在彼此下方

问题描述

这听起来很基本和愚蠢的问题，但我必须让这个工作，因此在这个频道上被问到。我有一个span要放置在彼此旁边的元素，我有一个span元素的宽度。我希望该跨度中的元素尊重宽度，当它们超出该宽度时，我希望它们落在下一行。

 <div class="text">
     <span>
    eel1
    </span>
    <span>
    eel1
    </span>
    <span>
    eel1
    </span>
    <span>
    eel1
    </span>
  </div>
// these values are array of strings that I populate inside this span

这是它目前的样子：

https://jsfiddle.net/gpjcutr9/2/

所以我正在考虑将其作为输出。

ele1, ele2, ele3,
ele4, ele5, ele6

因此，根据span我希望能够在一行中显示这么多元素的宽度。此外，由于这不是静态 HTML，而是spans为这些元素动态生成的。

谢谢！

标签： javascriptcss

解决方案

删除clear: left;CSS 中的跨度。这就是说，每个 span 元素不应允许其左侧的浮动元素导致 span 转到下一行。

还要改变测试类的宽度。在 20px 时，它太小而无法容纳 span 元素。

你的 CSS 应该是这样的：

span {
  float: left;
}
.test {
  width: 100%;
}
.spanWidth {
  width: 80px;
}

推荐阅读