如何在主div的底部制作div？ [复制]

Posted 2023-03-06

【中文标题】如何在主div的底部制作div？ [复制]

【英文标题】：how to make div in bottom inside the main div? [duplicate]

【发布时间】：2020-05-10 12:44:24

【问题描述】：

如何用类 boxLinks = bottom in the main box = class= main-box 制作 div？

我的想法

这个类主宽1200px； 这个类主框是5个div，每个div宽度25%

.main-box 
  width= "25%";
  float= left;

<div class= "main">
    <div class="main-box">
       <div class="boxImg"></div>
       <div class="boxTital"></div>
       <div class="boxLinks">
         <button> PRESS </button>
       </div>
    </div>
</div>

我希望这个 div boxLinks 在最后一个 div 中，

【问题讨论】：

你可以分享你的代码sn-ps

【参考方案1】：

您可以使用flexbox 来完成这项工作。 您必须将主框设置为flex。 然后boxLinks 变成flex element，所以使用属性align-self 你可以把它放在底部。

你可以在css-tricks找到一个很好的教程

.main-box 
  width: "25%";
  float: left;
  border: 1px solid #000;
  width: 500px;
  height: 400px;
  display: flex;


.boxLinks 
  flex: 0 1 100%;
  height: 100px; 
  background: #000;
  align-self: flex-end;/* this do the work */

<div class="main">
  <div class="main-box">
    <div class="boxImg"></div>
    <div class="boxTital"></div>
    <div class="boxLinks">
      <button> PRESS </button>
    </div>
  </div>
</div>

【参考方案2】：

这很简单。您可以在“main-box”上使用position: relative，在“boxLinks”上使用position: absolute、bottom:0。

jsFiddle 上的工作示例。

.main 
  display: flex;


.main-box 
  width: 25%;
  height: 100px;
  float: left;
  position: relative;
  background-color: #f00;


.boxLinks 
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  background-color: #0f0;

<div class="main">
  <div class="main-box">
    <div class="boxImg"></div>
    <div class="boxTital"></div>
    <div class="boxLinks">
      <button> PRESS </button>
    </div>
  </div>
</div>

【参考方案3】：

试试这个：

.main-box 
    width= 25%;
    float= left;
    position:relative;
    min-height:150px;
    background:#000;


.boxLinks
   position:absolute;
   bottom:0;
   left:50%;
   transform:translateX(-50%);

<div class= "main">
    <div class="main-box">
       <div class="boxImg"></div>
       <div class="boxTital"></div>
       <div class="boxLinks">
         <button> PRESS </button>
       </div>
    </div>
</div>

【讨论】：

谢谢，这段代码随身携带，但我有一些问题，按钮不在 div boxLinks 中居中，我使用 text-align: center;和边距：0;