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

首先，您需要2个样式1用于桌面，而另一个用于手机，因此通过媒体查询将此样式用于您的手机。

关于容器使用中的元素

display: inline-block;

和容器使用

white-space: nowrap;

Answer 2

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

如果要删除内联块之间的空格，请将font-size：0添加到父

.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/

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

2 个答案: