Question

如何在CSS中开发水平滚动项（必须使用float）。这就是我试图做到的方式。但是我无法获得理想的结果。而且我一定不能使用flexbox，因为我需要使它支持IE。我只能使用浮点数。看看我的代码，让我知道我在哪里出错。

.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

您应该使用表格而不是嵌套的浮动元素。这就是您可以保证在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>

如何使用CSS开发单杠（带浮点）

1 个答案: