使内部html内容跳过而不是外部html内容

Question

我有一周中的几天，时间戳可以是任意数字

当时间戳数量增加或我们收缩浏览器时，预期的行为是让时间戳跳过这样的

然而，行为就像这个

这是我一天的简化HTML代码;星期一

<div class="form-group">
    <button class="btn btn-secondary days">
         Monday
         <span class="sprite-1-arrow-black-right"></span>
     </button>
     <div class="timestamps">
         <div class="timestamp">
             00:00 am - 00:00 pm
          </div>
          <div class="timestamp">
            00:00 am - 00:00 pm
           </div>
     </div>
 </div>

在简化的css / sass

中

.days {
        display: inline-block;
}
.timestamps {
       display:inline-block;
}
.timestamp {
       display: inline-block;
}

我认为，应该有灵活解决方案，但我不知道如何！

Answer 1

将所有内容包装在Flex容器中。默认情况下，它会有flex-wrap: nowrap。

然后将时间戳包装在嵌套的Flex容器中。提供此容器flex-wrap: wrap。

现在主容器没有换行，但时间戳项将换行。

.form-group {
  display: flex;
}

.timestamps {
  display: flex;
  flex-wrap: wrap;
}

button {
  align-self: flex-start; /* override `stretch` default */
}

.timestamp {
  white-space: nowrap;    /* prevent text nodes from wrapping */
}

<div class="form-group">
  <button class="btn btn-secondary days">
    Monday
    <span class="sprite-1-arrow-black-right"></span>
  </button>
  <div class="timestamps">
    <div class="timestamp">00:00 am - 00:00 pm</div>
    <div class="timestamp">00:00 am - 00:00 pm</div>
  </div>
</div>

jsFiddle demo

Answer 2

为什么要使用flex？ 对于块来说，文档的流程自然是从上到下。

解决方案不是编写更多样式而是编写更少的代码：

enter***

https://codepen.io/anon/pen/gXGBZO

应始终避免编写不必要的代码：它会使您的项目变得难以理解，难以理解并且还会妨碍性能（使用复杂的布局可以增加您的回流/重绘时间）

Answer 3

在这种情况下，左侧按钮的宽度相等，使用float / overflow: hidden并结合inline-block的旧BFC技巧将解决此问题。

对于任何不能使用Flexbox（支持旧版浏览器）的人来说，这个都会有所帮助。

Fiddle demo

Stack snippet

.days {
  float: left;
  width: 80px;
  padding: 0 10px;
}
.timestamps {
  overflow: hidden;
  margin-left: 100px;  
}
.timestamp {
  display: inline-block;
}

<div class="form-group">
  <button class="btn btn-secondary days">
    Monday
    <span class="sprite-1-arrow-black-right"></span>
  </button>
  <div class="timestamps">
    <div class="timestamp">00:00 am - 00:00 pm</div>
    <div class="timestamp">00:00 am - 00:00 pm</div>
  </div>
</div>