设置div的内容位置答案

【问题标题】：Set div's content position设置div的内容位置
【发布时间】：2021-01-20 15:07:23
【问题描述】：

我在一行中有几个 div，其中包含 text1、break 和 text2。这是一个例子：

.testDiv {
    border: solid;
    border-width: thin;
    border-radius: 1rem;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.5rem;
    text-align: center;
}

<div class="col-12 row">
    <div class="col-2 testDiv">
        <p>LineTop1</p>
        <hr />
        <p>LineBot</p>
    </div>
    <div class="col-2 testDiv">
        <p>LineTop1</p>
        <hr />
        <p>LineBot</p>
    </div>
    <div class="col-2 testDiv">
        <p>LineTop1 LineTop1 LineTop1</p>
        <hr />
        <p>LineBot</p>
    </div>
    <div class="col-2 testDiv">
        <p>LineTop1</p>
        <hr />
        <p>LineBot</p>
    </div>
    <div class="col-2 testDiv">
        <p>LineTop1</p>
        <hr />
        <p>LineBot</p>
    </div>
</div>

Code Fiddle

正如您在第三个 div 上看到的，如果 text1 较长并换行，则所有 div 的高度都在变化。现在，我怎样才能得到这样的结果：

What I want

因此，即使 div 越来越高，我也希望 text2 在同一行的所有 div 中（类似于 text2 的 margin-bottom 0）。

【问题讨论】：

请阅读How to Ask和minimal reproducible example。所有与您的问题相关的代码都直接属于您的问题。不要只是将其转储到外部平台上。

标签： css

【解决方案1】：

只需将min-height 属性添加到您的 p 标签并添加一个设置了 min-height 的类。

示例如下：

.testDiv {
  border: solid;
  border-width: thin;
  border-radius: 1rem;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  padding: 0.5rem;
  text-align: center;
}

.eq-height {min-height:75px;}

<div class="col-12 row">
  <div class="col-2 testDiv">
    <p class="eq-height">LineTop1</p>
    <hr />
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p class="eq-height">LineTop1</p>
    <hr />
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p class="eq-height">LineTop1 LineTop1 LineTop1</p>
    <hr />
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p class="eq-height">LineTop1</p>
    <hr />
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p class="eq-height">LineTop1</p>
    <hr />
    <p>LineBot</p>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用flexbox（如果需要，可以使用几周）。这将自动处理高度。

更新小提琴代码： http://jsfiddle.net/fw93tc0y/4/

.testDiv {
  border: solid;
  border-width: thin;
  border-radius: 1rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.testDiv p:first-child{
  flex:1;
  border-bottom:1px solid #777;
  padding-bottom: 0.5rem;;
}

<div class="col-12 row">
  <div class="col-2 testDiv">
    <p>LineTop1</p>
   
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p>LineTop1</p>
   
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p>LineTop1 LineTop1 LineTop1</p>
    
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p>LineTop1</p>
  
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p>LineTop1</p>
    
    <p>LineBot</p>
  </div>
</div>

【讨论】：