javascript - 如何以响应方式创建水平元素？

Question

您好，我正在尝试创建一个效果来存档效果，如下所示

桌面

//lines up items vertically
 ----------------------------
|   --------------
|  |     item1    |
|  |              |
|   --------------
|   --------------
|  |     item2    |
|  |              |
|   --------------
|   --------------
|  |     item3    |
|  |              |
|   --------------

在电话中，

 ----------------------------
|   --------------   -----------------
|  |     item1    | |     item2       |  
|  |              | |                 |  //line up horizontally for all items
|   --------------   -----------------
|
 ----------------------------

我正在使用 Angular，这是我的代码。

<div class="row">
   <div class="item-container col-xs-12 col-lg-4">
      <ul>
         <li ng-repeat="item in items">
              <div>{{item.name}}</div>
              //other html to show items infos...
         </li>
      </ul>
   <div>
</div>

在手机中，我只能在一行中放置有限的元素(只能容纳 3 个元素)并且它将第 4 个元素推到下一行，因为 item-container 没有足够的宽度.我需要水平显示所有元素(超过 10 个)。有没有办法做到这一点？

非常感谢!

Answer 1

演示 - http://jsfiddle.net/victor_007/zx8re147/

如果你想删除行内 block 之间的空白，添加 font-size:0 到 parent

.container {
 }
.block {
  width: 100px;
  height: 100px;
  background: grey;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
  .container {
    white-space: nowrap;
    overflow-x: scroll;
  }
  .block {
    display: inline-block;
  }
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

去掉空格

@media screen and (min-width : 320px) and (max-width : 480px) {
    .container {
        white-space: nowrap;
        overflow-x: scroll;
        font-size:0;
    }
    .block {
        display:inline-block;
        font-size:15px;
    }
}

演示 - http://jsfiddle.net/victor_007/zx8re147/1/