在柔性DIV內將底部定位的按鈕居中

我試圖向用戶展示一個靈活的網格，所有的作業，以及一些選項。這些盒子的高度相互匹配，所以我不想設定一個，以便讓按鈕都在底部的相同位置。下面的片段是我目前的情況。

。

.site-membership-breakdown {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 15px;
  display: flex;
  flex-direction: 行。
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  padding-top: 15px;
}

.site-membership-breakdown-module {
  width: 20%;
  /*我不想設定高度，因為按鈕需要適合DIV，并且從底部往上15px居中*/。
  display: flex;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #FFFFFF;
  border-radius: 0;
  border: 10px solid #000000;
  padding: 10px;
}

@media only screen and （max-width: 500px) {
  .site-membership-breakdown-module {
    width: 100%;
    height: 250px display: flex;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #FFFFFF;
    border-radius: 0;
    border: 10px solid #000000;
    padding: 10px;
  }
}

.site-membership-breakdown-module-inner {
  display: block;
  width: 100%;
  position: relative;
}

< div class="site-membership-breakdown"> 

  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃1</p>/span>
      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700">- Thing 1. <br>- 事情2。 <br>- 事情3.</p> 


      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 加入1</p>/span>
            </button>/span>
    </div>


  </div>/span>


  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃2</p>/span>
      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700">- Thing 1. <br>- 事情2。 <br>- 事情3。 <br>- 事情4.</p>- 事情5.

      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 加入2</p>/span>
            </button>/span>
    </div>


  </div>/span>

  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃3</p>/span>
      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700">- Thing 1. <br>- 事情2。 <br>- 事情3.<br> - 事情4. <br>- 事情5.</p>- 事情6.

      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 加入3</p>。
            </button>/span>
    </div>


  </div>/span>

  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃4</p>/span>

      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700"/span>> 關于最大的計劃的一些資訊，這個計劃有最多的資訊，作為一個段落來顯示計劃內的內容。 </p> 

      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 免費試用</p>。
            </button>/span>

    </div>


  </div>/span>


</div>/span>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

下一個代碼段是我所嘗試的，它在定位方面是可行的，但需要在黑色輪廓框上設定一個高度。理想情況下，按鈕將位于每個盒子的底部，高度相同。在較小的視口寬度上，所有按鈕的高度可以是相同的，或者僅僅是足以適應內容的高度。

。

.site-membership-breakdown {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 15px;
  display: flex;
  flex-direction: 行。
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  padding-top: 15px;
}

.site-membership-breakdown-module {
  width: 20%;
  /*我不想設定高度，因為按鈕需要適合DIV，并且從底部往上15px居中*/。
  display: flex;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #FFFFFF;
  border-radius: 0;
  border: 10px solid #000000;
  padding: 10px;
}

@media only screen and （max-width: 500px) {
  .site-membership-breakdown-module {
    width: 100%;
    height: 250px display: flex;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #FFFFFF;
    border-radius: 0;
    border: 10px solid #000000;
    padding: 10px;
  }
}

.site-membership-breakdown-module-inner {
  display: block;
  width: 100%;
  position: relative;
}

.site-join-button {
    height: 60px;
    width: 120px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
    margin-bottom: 15px;
    color: #FFFFFF; 
    background-color: #000000; 
    border: 5px solid #000000;
    border-radius: 0;
    position: absolute;
    bottom: 0;
}

@media only screen and （max-width: 500px) {
.site-join-button {
    height: 60px;
    width: 120px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #FFFFFF; 
    background-color: #000000; 
    border: 5px solid #000000;
    border-radius: 0;
    position: absolute;
    bottom: 0;
}
}

.site-join-button:hover {
    color: #000000;
    background-color: #FFFFFF;
}

< div class="site-membership-breakdown"> 

  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃1</p>/span>
      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700">- Thing 1. <br>- 事情2。 <br>- 事情3.</p> 


      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 加入1</p>/span>
            </button>/span>
    </div>


  </div>/span>


  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃2</p>/span>
      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700">- Thing 1. <br>- 事情2。 <br>- 事情3。 <br>- 事情4.</p>- 事情5.

      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 加入2</p>/span>
            </button>/span>
    </div>


  </div>/span>

  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃3</p>/span>
      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700">- Thing 1. <br>- 事情2。 <br>- 事情3.<br> - 事情4. <br>- 事情5.</p>- 事情6.

      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 加入3</p>。
            </button>/span>
    </div>


  </div>/span>

  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃4</p>/span>

      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700"/span>> 關于最大的計劃的一些資訊，這個計劃有最多的資訊，作為一個段落來顯示計劃內的內容。 </p> 

      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 免費試用</p>。
            </button>/span>

    </div>


  </div>/span>


</div>/span>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

我得到的最接近的結果是按鈕都在同一高度，但由于容器沒有設定高度（在測驗中使用了300px），按鈕都漂浮在內容上。我的目標是讓它們在串列的底部相互對齊，方法是在底部定位，并使用15px的邊距使其稍微浮動。

提前感謝任何幫助。

EDIT 這是我目前在頂部的視圖，以及在底部的預期結果。

uj5u.com熱心網友回復：

flex實作。

添加display: flex; flex-direction: column;到.site-membership-breakdown-module-inner

并且

flex: 1;到.site-membership-breakdown-paragraph-text

這將使內容增長并適合空白的空間。

。

.site-membership-breakdown {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 15px;
  display: flex;
  flex-direction: 行。
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  padding-top: 15px;
}

.site-membership-breakdown-module {
  width: 20%;
  /*我不想設定高度，因為按鈕需要適合DIV，并且從底部往上15px居中*/。
  display: flex;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #ffffff;
  border-radius: 0;
  border: 10px solid #000000;
  padding: 10px;
}

@media only screen and （max-width: 500px) {
  .site-membership-breakdown-module {
    width: 100%;
    height: 250px;
    display: flex;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #ffffff;
    border-radius: 0;
    border: 10px solid #000000;
    padding: 10px;
  }
}

.site-membership-breakdown-module-inner {
  display: flex;
  width: 100%;
  /* position: relative; */
  flex-direction: column;
}

.site-membership-breakdown-paragraph-text {
  flex: 1;
}

< div class="site-membership-breakdown"> 
  <div class="site-membership-breakdown-module">/span>
    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>>
        計劃1
      </p>/span>
      <!-- <br /> -->
      <p class="site-membership-breakdown-paragraph-text center black w700">/span>
        - 事情1.<br />- 事情2.<br />/span>- 事情3.
      </p>- 事情3.

      <button。
        class="site-join-button"/span>
        onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'" 
      >
        <p class="site-landing-button-text w700"/span>> 加入1</p>/span>
      </button>/span>
    </div>
  </div>/span>

  <div class="site-membership-breakdown-module">/span>
    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>>
        計劃2
      </p>計劃2
      <!-- <br /> -->
      <p class="site-membership-breakdown-paragraph-text center black w700">/span>
        - 事情1.<br />- 事情2. <br />- 事情3.<br />- 事情4。
      </p>- 事情4.

      <button。
        class="site-join-button"/span>
        onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'" 
      >
        <p class="site-landing-button-text w700"/span>> 加入2</p>/span>
      </button>/span>
    </div>
  </div>/span>

  <div class="site-membership-breakdown-module">/span>
    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>>
        計劃3
      </p>計劃3
      <!-- <br /> -->
      <p class="site-membership-breakdown-paragraph-text center black w700">/span>
        - 事情1.<br />- 事情2.<br />/span>- 事情3. <br />- 事情4.<br />- 事情5.
        事物5.
      </p>- 事情5.

      <button。
        class="site-join-button"/span>
        onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'" 
      >
        <p class="site-landing-button-text w700"/span>> 加入3</p>。
      </button>/span>
    </div>
  </div>/span>

  <div class="site-membership-breakdown-module">/span>
    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>>
        計劃4
      </p>/span>

      <!-- <br /> -->
      <p class="site-membership-breakdown-paragraph-text center black w700"> 
        關于最大的計劃的一些資訊，這個計劃有最多的
        資訊的段落，以顯示該計劃內有哪些內容。
        計劃。
      </p> 

      <button 
        class="site-join-button"/span>
        onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'" 
      >
        <p class="site-landing-button-text w700"/span>> 免費試用</p>。
      </button>/span>
    </div>
  </div>/span>
</div>/span>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

你必須為按鈕添加transform: translateX(-50%)和left:50%;，因為你使用的是position:absolute，并添加padding-bottom:65px 60px按鈕的高度和5px容器下面的空間。

。

.site-membership-breakdown {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 15px;
  display: flex;
  flex-direction: 行。
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  padding-top: 15px;
}

.site-membership-breakdown-module {
  width: 20%;
  /*我不想設定高度，因為按鈕需要適合DIV，并且從底部往上15px居中*/。
  display: flex;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #FFFFFF;
  border-radius: 0;
  border: 10px solid #000000;
  padding: 10px;
}

@media only screen and （max-width: 500px) {
  .site-membership-breakdown-module {
    width: 100%;
    height: 250px display: flex;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #FFFFFF;
    border-radius: 0;
    border: 10px solid #000000;
    padding: 10px;
  }
}

.site-membership-breakdown-module-inner {
  display: block;
  width: 100%;
  position: relative;
  padding-bottom: 65px;
}

.site-join-button {
    height: 60px;
    width: 120px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
    margin-bottom: 15px;
    color: #FFFFFF; 
    background-color: #000000; 
    border: 5px solid #000000;
    border-radius: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX（-50%）。
}

@media only screen and （max-width: 500px) {
.site-join-button {
    height: 60px;
    width: 120px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #FFFFFF; 
    background-color: #000000; 
    border: 5px solid #000000;
    border-radius: 0;
    position: absolute;
    bottom: 0;
}
}

.site-join-button:hover {
    color: #000000;
    background-color: #FFFFFF;
}

< div class="site-membership-breakdown"> 

  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃1</p>/span>
      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700">- Thing 1. <br>- 事情2。 <br>- 事情3.</p> 


      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 加入1</p>/span>
            </button>/span>
    </div>


  </div>/span>


  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃2</p>/span>
      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700">- Thing 1. <br>- 事情2。 <br>- 事情3。 <br>- 事情4.</p>- 事情5.

      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 加入2</p>/span>
            </button>/span>
    </div>


  </div>/span>

  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃3</p>/span>
      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700">- Thing 1. <br>- 事情2。 <br>- 事情3.<br> - 事情4. <br>- 事情5.</p>- 事情6.

      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 加入3</p>。
            </button>/span>
    </div>


  </div>/span>

  <div class="site-membership-breakdown-module">/span>

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700"/span>> 計劃4</p>/span>

      <br>/span>
      <p class="site-membership-breakdown-paragraph-text center black w700"/span>> 關于最大的計劃的一些資訊，這個計劃有最多的資訊，作為一個段落來顯示計劃內的內容。 </p> 

      <button class="site-join-button" onclick="if (! window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700"/span>> 免費試用</p>。
            </button>/span>

    </div>


  </div>/span>


</div>/span>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/333978.html

標籤：

上一篇：可以在函式中初始化單個指標嗎？如果可以，如何初始化？

下一篇：在mysql和node.js上進行AES加密