【问题标题】:how to make div in bottom inside the main div? [duplicate]如何在主div的底部制作div? [复制]
【发布时间】: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

标签: html css


【解决方案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: absolutebottom: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;
      猜你喜欢
      • 1970-01-01
      • 2021-01-19
      • 1970-01-01
      • 2011-10-08
      • 2023-03-13
      • 2012-08-28
      • 1970-01-01
      • 2022-01-10
      • 2014-07-23
      相关资源
      最近更新 更多