Question

我有循环，通过我拥有的所有图片并显示它们。我想从左到右将它们显示在一行中，但是我用css将它们显示在另一行之下。我使用流程但不确定我是否正确使用它。

这是我的代码：

.column.is-narrow {
  float: right;
}
.box {
  float: right;
}

<div class="column">
  <div class="columns" ng-repeat="a in $ctrl.f">
    <div class="column is-narrow">
      <div class="box" style="width: 200px;">
        <p class="title is-5">{{album}}</p>
        <figure class="image is-128x128">
          <!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
          <img src="http://dummyimage.com/128x128" />
        </figure>
        <p class="subtitle">{{person}}</p>
      </div>
    </div>
  </div>

我知道我的CSS不正确我一直在寻找答案但找不到答案。

Answer 1

基本上，当你漂浮物品时，如果没有足够的空间同时展示它们，它们仍会包裹。最简单的解决方案是在它们上设置宽度，以确保它们的容器总是足够宽以适应内容。您可以使用百分比或像素来执行此操作，具体取决于您的使用情况。

注意：如果使用百分比，最多100％的百分比可能仍会导致其换行，因为它们可能不会考虑填充，边距和/或边框，具体取决于其他内容。我通常会对49%执行类似的操作，然后向左和向左浮动一次。

Answer 2

你可以使用显示和思维这个内联式<div class="box" style="width: 200px;">开头，不足以容纳文本和img并排

display:table / table-cell;

.column.is-narrow {
  float: right;
}
.box {display:table;}
.box> p, .box> figure {display:table-cell;vertical-align:middle/* or top or else */
}

<div class="column">
  <div class="columns" ng-repeat="a in $ctrl.f">
    <div class="column is-narrow">
      <div class="box" style="width: 200px;">
        <p class="title is-5">{{album}}</p>
        <figure class="image is-128x128">
          <!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
          <img src="http://dummyimage.com/128x128" />
        </figure>
        <p class="subtitle">{{person}}</p>
      </div>
    </div>
  </div>

display:flex;

.column.is-narrow {
  float: right;
}
.box {
  display: flex;
  /* removed width:200px from inline-style*/
}
p {
  margin: auto;
}

<div class="column">
  <div class="columns" ng-repeat="a in $ctrl.f">
    <div class="column is-narrow">
      <div class="box">
        <p class="title is-5">{{album}}</p>
        <figure class="image is-128x128">
          <!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
          <img src="http://dummyimage.com/128x128" />
        </figure>
        <p class="subtitle">{{person}}</p>
      </div>
    </div>
  </div>

Answer 3

最简单的方法是通过设置属性display: flex和flex-direction:row将父div声明为flex容器。如果您不想包装图片，可以设置flex-wrap:nowrap。这里http://the-echoplex.net/flexyboxes/是弹性箱的好地方。

Answer 4

所以我找到了答案，这很简单:) 我只需要在课程中添加一个div，我将它放到左边。这就是我想要的：

html的

 <div class="column">
      <div class="columns">
      <div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
        <div class="column is-narrow">
          <div class="box" style="width: 200px;">
            <p class="title is-5">{{album}}</p>
            <figure class="image is-128x128">
              <!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
              <img src="http://dummyimage.com/128x128" />
            </figure>
            </div>
            </div>
            <p class="subtitle">{{person}}</p>
          </div>
        </div>
      </div>

的CSS

.float{
    float:left;
}

就是这样。它正在发挥作用。：）

如何将两个元素并排放在一个div中？

4 个答案: