Question

我有一个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>

Answer 1

将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，它应该有效。

Answer 2

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

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

Answer 3

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

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

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

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

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

3 个答案: