Question

尝试使用Foundation 6创建内联样式框，但product-detail的宽度会丢失其全宽。为什么呢？

HTML：请参阅下面的更新

<div class="row">
  <div class="large-10 large-centered columns">
    <div class="box">
      <div class="image">
        ...
      </div>
      <div class="product-detail">
        ...
      </div>
    </div>
  </div>
</div>

CSS：

.box{ display: inline-flex }
.product-detail{ left: 20px }

如何在不丢失宽度的情况下将.image和.product-detail放在一行中？

编辑：

抱歉不是100％精确。 box保留bootstrap card中的card类。所以我的确切html看起来像这样：

<div class="row">
  <div class="large-10 large-centered columns">
    <div class="box">
      <div class="image">
        ...
      </div>
      <div class="card">
        <div class="card-block">
          <div class="product-detail">
            ...
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以将.image和.product-detail放在一行中，方法是将其父级设为灵活容器。

.box { display: flex: }

然后，您可以使用width，flex-basis或flex属性控制每个孩子的宽度。

Answer 2

img {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.1/foundation-flex.css" rel="stylesheet" />


<div class="row">
  <div class="small-10 columns">
    <div class="row">
      <div class="small-10 columns">
        <div class="image">
          <img src="http://placehold.it/350x150">
        </div>
      </div>
      <div class="columns">
        <p class="product-detail">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
      </div>
    </div>
  </div>
  <div class="columns">
    There is two left over columns here unused
  </div>
</div>

此版本的基础较旧，因为我想使用其中包含flex-grid的CDN版本。事实证明，通过不指定列的大小（在文本的第二列上），您只是说要占用剩下的空间。请参阅：http://foundation.zurb.com/sites/docs/flex-grid.html

note ：测试时确保切换到整页视图...请记住网格是否有响应。

内联样式缩短了其他div的宽度

2 个答案: