CSS堆栈角度重复水平而不是垂直

时间:2016-05-06 11:38:18

标签: javascript html css angularjs

我有一个ng-repeat但是对于它创建的每个div,它都是垂直堆叠的。对于这个页面,我正在水平滚动,所以是否可以将这些水平放置,以便它们尽可能并排?

这是html:

<div ng-repeat="r in rooms">
               <div class="display:inline-block">
                      <div class="item item-icon" style="margin-bottom:10px !important;width:400px;">

                         <div><span class="icon ion-home"></span> <b>New Room</b></div>
                         <label class="item item-input">
                         <span class="input-label">Name</span><textarea placeholder="" ng-model="r.name"> </textarea>
                         </label>
                         <label class="item item-input">
                         <span class="input-label">Floor</span><textarea placeholder="Eg Ground Floor" ng-model="r.room"> </textarea>
                         </label>
                         <label class="item item-input item-stacked-label">
                         <span class="input-label">Description</span>
                         <textarea placeholder="yyy" rows="8" cols="10" ng-model="r.description">
                         </textarea>
                         </label>
                         <button class="button button-full button-dark" ng-click="startRoomProfileUpload(1,$index)">
                         Add An Image
                         </button>
                         <button class="button button-full button-dark" ng-click="removeRoom(r)">
                         Remove Room
                         </button>
                         <div class="row">
                            <span ng-repeat="x in r.selectedImageUri">
                               <div style="width:100%;">
                                  <div class="col">
                                     <img ng-src="{{x}}" width="100%" style="max-width:200px;" alt="image" style="">
                                     <div><button class="button button-assertive" ng-click="removeImage(r.selectedImageUri)" style="width:100%;">Delete</button></div>
                                  </div>
                               </div>
                            </span>
                         </div>
                      </div>
               </div>
            </div>

3 个答案:

答案 0 :(得分:0)

glBegin(GL_QUADS); glColor3f(1, 1, 1); glVertex3f(10, 10, 15); glVertex3f(20, 10, 15); glVertex3f(20, 20, 15); glVertex3f(10, 20, 15); glEnd(); glBegin(GL_TRIANGLES); glColor3f(0, 1, 0); glVertex3f(0, 0, 0); glVertex3f(22, 14, 0); glVertex3f(16, 22, 0); glEnd(); 提供给float:left,它应该有效。

答案 1 :(得分:0)

将css添加到<div class="row">display:table

<span ng-repeat="x in r.selectedImageUri">display:table-column

答案 2 :(得分:0)

如果我理解正确,你想要水平重复元素,父元素调整它的宽度以自动适合孩子吗?

如果是这种情况,试试这个。

将父元素设置为overflow-x:scroll; white-space: nowrap;,将子元素设置为display:inline-block;

查看在此处工作:https://jsfiddle.net/Collins/8s5fqmez/