Question

我正在努力实现以下目标：

在这里您可能会看到我到目前为止所做的事情：https://codepen.io/maketroli/pen/aaNezK

或在此代码段中

Activity

.product-descriptions {
  text-align: left;
  max-width: 400px;
}
.product-descriptions__item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.product-descriptions__icon-container {
  width: 100px;
  fill: red;
}
.product-descriptions__title {
  font-size: 1.325em;
  font-weight: bold;
  color: red;
}

我还应该做些什么才能达到我的需要？

Answer 1

我在您的示例中看到的最大区别是图标太大。我将它们缩小了一点，然后将标题放大了一点。从那里开始，边际空间不断扩大，使其看起来更像您的示例，似乎您已经很接近了。这是我的代码：

.product-descriptions {
  max-width: 400px; // To simulate Mobile

  &__item {
   display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  &__icon-container {
    width: 50px;
    fill: red;
  }

  &__title {
    font-size: 1.4em;
    font-weight: bold;
    color: red;
    margin-top: 4px;
    margin-left: 10px;
  }

  &__description {
    margin-left: 60px;
    width: 240px
  }

  &__link {
    margin-left: 60px;
    margin-bottom: 30px;
    margin-top: 8px;
    text-decoration: none;
  }
}

Answer 2

尝试这样的事情：

https://codepen.io/anon/pen/WgwVZj

基本上，如果您在标题，说明和链接周围放置一个容器，则它将svg和该容器变成原始flex容器的flex项。然后，删除flex-wrap: wrap;规则。

结果是文本与svg分开保留在单独的列中。使用一些CSS使SVG变小，您将很容易获得所需的设计。

<div class="product-descriptions">
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="container">
      <div class="product-descriptions__title">Advantage SafeBalance</div>
      <div class="product-descriptions__description">Say goodbye to paper checks—and to overdraft fees.</div>
      <a id="" class="product-descriptions__link" href="#" data-index="0">
                                  See details
                              </a>
      </div>
  </div>
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="container">
      <div class="product-descriptions__title">Advantage Plus</div>
      <div class="product-descriptions__description">More control, more options, more ways to waive the monthly fee.</div>
      <a id="" class="product-descriptions__link" href="#" data-index="1">
                                  See details
                              </a>
    </div>
  </div>
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="container">
    <div class="product-descriptions__title">Advantage Relationship</div>
    <div class="product-descriptions__description">Everything you get with the Plus setting along with extra perks and services.</div>
    <a id="" class="product-descriptions__link" href="#" data-index="2">
                                See details
                            </a>
    </div>
  </div>
</div>

经过编辑以包含CSS：

.product-descriptions {
  text-align: left;
  max-width: 400px; // To simulate Mobile

  &__item {
    display: flex;
    flex-direction: row;
    // flex-wrap: wrap;
  }

  &__icon-container {
    width: 60px; /* Changed to 60px */
    fill: red;
  }
  &__title {
    font-size: 1.325em;
    font-weight: bold;
    color: red;
  }
}

/* New CSS Here */
svg {
  width:50px
}

.product-descriptions__description {
 max-width:300px;
}

如何使用flexbox制作一堆物品

2 个答案: