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

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 class。所以我的 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

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 版本。事实证明，通过不指定列的大小（在文本的第二列上），您只是说占用 space 剩下的内容。参见：http://foundation.zurb.com/sites/docs/flex-grid.html

注意：测试时确保切换到完整页面视图...记住网格是响应式的。

Answer 2

您可以将 .image 和 .product-detail 放在一行中，方法是将它们的父容器设为 flex 容器。

.box { display: flex: }

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

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

Inline style shortens other divs width

html

css

flexbox

zurb-foundation