由於文本長度而導致網格/內聯彎曲問題

Question

我有一個正方形的方塊網格，每個方塊內都有文字。 僅一行文本時，一切正常。 正方形中的更多文本使其移動到其他文本的下方，並破壞網格。

另一個問題是，我希望一個正方形的頂部有一行附加的文本，如class="notice" 。 但是我也無法使它正常工作。

我創建了一個jsfiddle，以更清楚地顯示問題所在。 我在flexbox上瀏覽了本指南，但似乎無法解決問題，不確定是否相關。 對於新手，任何幫助都將不勝感激。

 <body>
  <div class="container">
    <div class="products">
      <div class="product">
        <p>Apples</p>
       <a href="#"><span class="link"></span></a>
      </div>
      <div class="product">
        <p class="notice">You won't find cheaper</p>
        <p>Best price you will find on grapes</p>
        <a href="#"><span class="link"></span></a>
      </div>
      <div class="product">
        <p>Orange</p>
        <a href="#"><span class="link"></span></a>
      </div>
      <div class="product" id="no">
        <p>Best price you will find on grapes, bananas, kiwis</p>
        <a href="#"><span class="link"></span></a>
      </div>
      <div class="product">
        <p>Orange</p>
        <a href="#"><span class="link"></span></a>
      </div>
      <div class="product">
        <p>Orange</p>
        <a href="#"><span class="link"></span></a>
      </div>
    </div>
  </div>
</body>

.products {
  text-align:center;
}

.product {
  background-color: red;
  display: inline-flex;
  height: 10em;
  margin-bottom: 10px;
  position: relative;
  width: 10em;
  justify-content:center;
  align-items:center;
}

.product p {
  color: black;
}

.product p.notice {
  font-size: 14px;
  color: yellow;
}

.link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.product:hover, div.product:focus {
  background-color: green;
}

Answer 1

不確定為什么需要display: inline-flex每個產品項的display: inline-flex 。 您可以簡單地使父對象成為具有以下display: flex的flex容器display: flex ，使所有產品項目都變為flex項目。

HTML （無變化）

CSS （僅調整部分）

.products {
    display: flex;                  /* establish primary flex container */
    flex-wrap: wrap;                /* enable flex items to wrap */
    justify-content: center;        /* center flex items horizontally, in this case */
}

.product {
    height: 10em;
    width: 10em;
    margin: 5px;
    position: relative;

    display: flex;                   /* establish nested flex container */
    flex-direction: column;          /* stack flex items vertically */
    justify-content: center;         /* center flex items vertically, in this case */
    align-items: center;             /* center flex items horizontally, in this case */
    background-color: red;
}

修訂的小提琴

Answer 2

inline-flex，inline-block，inline-table，inline，img，..它們都位於基線上，您可以使用vertical-align：

.product {
  background-color: red;
  display: inline-flex;
  vertical-align:top; /* HERE */
  height: 10em;
  margin-bottom: 10px;
  position: relative;
  width: 10em;
  justify-content:center;
  align-items:center;
}

https://jsfiddle.net/382m8wzg/11/

由於文本長度而導致網格/內聯彎曲問題

問題描述

2 個解決方案

解決方案1
1 已采納 2016-02-13 22:19:48

解決方案2
0 2016-02-13 22:33:07

由於文本長度而導致網格/內聯彎曲問題

問題描述

2 個解決方案

解決方案1 1 已采納 2016-02-13 22:19:48

解決方案2 0 2016-02-13 22:33:07

解決方案1
1 已采納 2016-02-13 22:19:48

解決方案2
0 2016-02-13 22:33:07