html - 如何使用css开发单杠(带float)

Question

如何在css中开发水平滚动项(一定要用float)。这是我尝试这样做的方法。但是我无法得到想要的结果。而且我不能使用 flexbox，因为我需要让它支持 IE。我只能使用 float 。看看我的代码，让我知道我在哪里犯了错误。

.bar {
  float: left;
  background-color: rgb(250, 250, 250);
  min-width: 100%;
  height: 62px;
  padding-top: 8px;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.box {
  float: left;
  display: block;
  height: 46px;
  width: calc(12.5% - 8px);
  border-radius: 3px;
  background-color: rgba(0, 123, 45, 1);
  box-shadow: 0 3px 4px 0 rgba(211, 246, 250, 1);
  text-align: center;
  margin-left: 13px;
  padding: 5px;
}

.day {
  display: block;
  opacity: 0.76;
  color: rgba(255, 255, 255, 1);
  font-size: 11px;
  line-height: 13px;
}

.date {
  display: block;
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

      <div class='bar'}>
        <div>
          <div class='box'}>
            <div class='day'>monday</div>
            <div class='date'>25</div>
          </div>
        </div>
        <div>
          <div class='box'}>
            <div class='day'>monday</div>
            <div class='date'>25</div>
          </div>
        </div>
        <div>
          <div class='box'}>
            <div class='day'>monday</div>
            <div class='date'>25</div>
          </div>
        </div>
        <div>
          <div class='box'}>
            <div class='day'>monday</div>
            <div class='date'>25</div>
          </div>
        </div>
        <div>
          <div class='box'}>
            <div class='day'>monday</div>
            <div class='date'>25</div>
          </div>
        </div>
        <div>
          <div class='box'}>
            <div class='day'>monday</div>
            <div class='date'>25</div>
          </div>
        </div>
        <div>
          <div class='box'}>
            <div class='day'>monday</div>
            <div class='date'>25</div>
          </div>
        </div>
        <div>
          <div class='box'}>
            <div class='day'>monday</div>
            <div class='date'>25</div>
          </div>
        </div>
      </div>

Answer 1

您应该使用表格而不是嵌套的 float 元素。这就是您可以保证在 IE 上运行您的代码的方式

.bar {
  background-color: rgb(250, 250, 250);
  min-width: 100%;
  height: 100px;
  padding-top: 8px;
  white-space: nowrap;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.box {
  float: left;
  display: block;
  height: 46px;
  width: 100px;
  border-radius: 3px;
  background-color: rgba(0, 123, 45, 1);
  box-shadow: 0 3px 4px 0 rgba(211, 246, 250, 1);
  text-align: center;
  margin-left: 13px;
  padding: 5px;
}

.day {
  display: block;
  opacity: 0.76;
  color: rgba(255, 255, 255, 1);
  font-size: 11px;
  line-height: 13px;
}

.date {
  display: block;
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

<div class='bar'>
  <table>
    <tr>
      <td>
        <div class='box'>
          <div class='day'>monday</div>
          <div class='date'>25</div>
        </div>
      </td>
      <td>
        <div class='box'>
          <div class='day'>monday</div>
          <div class='date'>25</div>
        </div>
      </td>
      <td>
        <div class='box'>
          <div class='day'>monday</div>
          <div class='date'>25</div>
        </div>
      </td>
      <td>
        <div class='box'>
          <div class='day'>monday</div>
          <div class='date'>25</div>
        </div>
      </td>
      <td>
        <div class='box'>
          <div class='day'>monday</div>
          <div class='date'>25</div>
        </div>
      </td>
      <td>
        <div class='box'>
          <div class='day'>monday</div>
          <div class='date'>25</div>
        </div>
      </td>
      <td>
        <div class='box'>
          <div class='day'>monday</div>
          <div class='date'>25</div>
        </div>
      </td>
      <td>
        <div class='box'>
          <div class='day'>monday</div>
          <div class='date'>25</div>
        </div>
      </td>
    </tr>
  </table>

</div>