如何将标签与 CSS 中 div 的“BOTTOM”对齐？答案

【问题标题】：How to align label to the “BOTTOM” of a div in CSS?如何将标签与 CSS 中 div 的“BOTTOM”对齐？
【发布时间】：2018-10-04 10:33:45
【问题描述】：

我是开发 UI 的初学者，我正在尝试显示具有相同宽度和高度的网格视图，如下图所示，我想在每个网格项的底部设置标签

我尝试了下面的代码来满足这个要求，但它不起作用，请有人帮助我

https://www.w3schools.com/code/tryit.asp?filename=FVWDENP91LF8

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
    box-sizing: border-box;
}
.column {
    float: left;
    width: calc(25% - 4px);
    margin:2px;
    position:relative;
}

#bottom-lab {
  position:absolute;
  bottom:5px;
}

</style>
</head>
<body>

<h2>Grid View</h2>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <div id="bottom-lab">
    <h2>Column 1</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <div id="bottom-lab">
    <h2>Column 2</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ccc;">
    <div id="bottom-lab">
    <h2>Column 3</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 4</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 5</h2>
    <p>Some text..</p>
    </div>
  </div>
<div class="column" style="background-color:#ddd;">
  <div id="bottom-lab">
    <h2>Column 6</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 7</h2>
    <p>Some text..</p>
    </div>
  </div>
   <div class="column" style="background-color:#ddd;">
     <div id="bottom-lab">
    <h2>Column 8</h2>
    <p>Some text..</p>
    </div>
  </div>
<div class="column" style="background-color:#ddd;">
  <div id="bottom-lab">
    <h2>Column 9</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 10</h2>
    <p>Some text..</p>
    </div>
  </div>
</div>
</body>
</html>

【问题讨论】：

你能分享你的代码吗？
@Vikas Jadhav 你看到我的代码了吗？
@AbhiRam, Remove #bottom-lab 样式，我看到它已经对齐，没有那段代码。此外，id 应该是唯一的，但您使用了相同的 id bottom-lab
你能纠正我的代码吗，因为我是学习者
始终将class 用于CSS，将id 用于脚本和其他内容。

标签： html css

【解决方案1】：

Id 应该始终是唯一的，它只在下面工作

删除了position:absolute。检查positioning elements

absolute - 元素的定位是相对于它的第一个定位的（非静态）祖先元素

删除了重复的 ID bottom-lab
添加了一些 CSS 以获得不错的视图

* 
{
    box-sizing: border-box;
}

.column
{
  width: 150px
  height: 150px;
  float: left;
  width: calc(25% - 4px);
  margin:2px;
}

.column p, h2
{
 text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Grid View</h2>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <div>
    <h2>Column 1</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <div>
    <h2>Column 2</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ccc;">
    <div>
    <h2>Column 3</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div>
    <h2>Column 4</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div>
    <h2>Column 5</h2>
    <p>Some text..</p>
    </div>
  </div>
<div class="column" style="background-color:#ddd;">
  <div>
    <h2>Column 6</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 7</h2>
    <p>Some text..</p>
    </div>
  </div>
   <div class="column" style="background-color:#ddd;">
     <div>
    <h2>Column 8</h2>
    <p>Some text..</p>
    </div>
  </div>
<div class="column" style="background-color:#ddd;">
  <div>
    <h2>Column 9</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div>
    <h2>Column 10</h2>
    <p>Some text..</p>
    </div>
  </div>
</div>
</body>
</html>

【讨论】：

您的代码中的宽度和高度不相等，而且我想将标签保留在项目的底部
宽高不相等？？它从类.column 应用，其中宽度和高度指定为150，并且必须相同。还有，你所谓的标签是什么？？

【解决方案2】：

您的网格相互重叠的原因是因为position:relative; 和position:absolute;。

position:absolute; 不会跟随其容器的流动。我尝试评论您的display 属性。结果如下：

另外，您不能多次使用同一个 id。在这种情况下，请将其更改为 class。希望这会有所帮助。

* {
    box-sizing: border-box;
}
.column {
    float: left;
    width: calc(25% - 4px);
    margin:2px;
    /* position:relative; */
}

.bottom-lab {
  /* position:absolute; */
  bottom:5px;
  border: 1px solid black;
}

<h2>Grid View</h2>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <div class="bottom-lab">
    <h2>Column 1</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <div class="bottom-lab">
    <h2>Column 2</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ccc;">
    <div class="bottom-lab">
    <h2>Column 3</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div class="bottom-lab">
    <h2>Column 4</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div class="bottom-lab">
    <h2>Column 5</h2>
    <p>Some text..</p>
    </div>
  </div>
<div class="column" style="background-color:#ddd;">
  <div class="bottom-lab">
    <h2>Column 6</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div class="bottom-lab">
    <h2>Column 7</h2>
    <p>Some text..</p>
    </div>
  </div>
   <div class="column" style="background-color:#ddd;">
     <div class="bottom-lab">
    <h2>Column 8</h2>
    <p>Some text..</p>
    </div>
  </div>
<div class="column" style="background-color:#ddd;">
  <div class="bottom-lab">
    <h2>Column 9</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div class="bottom-lab">
    <h2>Column 10</h2>
    <p>Some text..</p>
    </div>
  </div>
</div>

【讨论】：

您的代码中的宽度和高度不相等，而且我想将标签保留在项目的底部

【解决方案3】：

你可以使用弹性盒子。我喜欢弹性盒子。您可以在网格项的类上使用样式display: flex; justify-content: center; align-items: flex-end;。

.flex-c {
    display: inline-flex;
}
.flex-i {
    height: 100px;
    width: 100px;
    background-color: gray;
    margin: 10px;
    padding: 10px;
    align-items: flex-end;
    justify-content: center;
    display: flex;
}

<div class="flex-c">
    <div class="flex-i">text</div>
    <div class="flex-i">text</div>
    <div class="flex-i">text</div>
    <div class="flex-i">text</div>
</div>

【讨论】：

【解决方案4】：

检查这个 sn-p 我希望你想要这个输出。

h2, p {margin:0px;padding: 0px;}

.column {
  display: inline-block;
  padding: 5px;
  position: relative;
  width: 150px;
  
  margin: 7px;
  box-sizing: border-box;
  height: 150px;
}

#bottom-lab {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: #222;
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  color:#fff;
}

<h2>Grid View</h2>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <div id="bottom-lab">
    <h2>Column 1</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <div id="bottom-lab">
    <h2>Column 2</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ccc;">
    <div id="bottom-lab">
    <h2>Column 3</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 4</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 5</h2>
    <p>Some text..</p>
    </div>
  </div>
<div class="column" style="background-color:#ddd;">
  <div id="bottom-lab">
    <h2>Column 6</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 7</h2>
    <p>Some text..</p>
    </div>
  </div>
   <div class="column" style="background-color:#ddd;">
     <div id="bottom-lab">
    <h2>Column 8</h2>
    <p>Some text..</p>
    </div>
  </div>
<div class="column" style="background-color:#ddd;">
  <div id="bottom-lab">
    <h2>Column 9</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 10</h2>
    <p>Some text..</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案5】：

使用CSS Grid 可以更轻松地进行管理。

它正是为此目的而设计的。

.grid {
  display:grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(3, 150px);
  gap:10px
}
.column{
  display:flex;
  align-items: flex-end;
  padding:10px;
}
.column p{
  margin:0;
}

<h2>Grid View</h2>
<div class="grid">
  <div class="column" style="background-color:#aaa;">
    <div id="bottom-lab">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <div id="bottom-lab">
      <h2>Column 2</h2>
      <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ccc;">
    <div id="bottom-lab">
      <h2>Column 3</h2>
      <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
      <h2>Column 4</h2>
      <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
      <h2>Column 5</h2>
      <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
      <h2>Column 6</h2>
      <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
      <h2>Column 7</h2>
      <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
      <h2>Column 8</h2>
      <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
      <h2>Column 9</h2>
      <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
      <h2>Column 10</h2>
      <p>Some text..</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案6】：

我通过添加 jQuery 脚本更新了答案。它获取宽度并为每个 div 分配相同的高度。希望这会对你有所帮助。

$('.column').each(function(){
  var w = $(this).outerWidth();
  $(this).css('height',w);
});

h2, p {margin:0px;padding: 0px;}

.column {
  display: inline-block;
  padding: 5px;
  position: relative;
  width: calc(25% - 17px);
  margin: 7px;
  box-sizing: border-box;
  height: 250px;
}

#bottom-lab {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: #222;
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Grid View</h2>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <div id="bottom-lab">
    <h2>Column 1</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <div id="bottom-lab">
    <h2>Column 2</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ccc;">
    <div id="bottom-lab">
    <h2>Column 3</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 4</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 5</h2>
    <p>Some text..</p>
    </div>
  </div>
<div class="column" style="background-color:#ddd;">
  <div id="bottom-lab">
    <h2>Column 6</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 7</h2>
    <p>Some text..</p>
    </div>
  </div>
   <div class="column" style="background-color:#ddd;">
     <div id="bottom-lab">
    <h2>Column 8</h2>
    <p>Some text..</p>
    </div>
  </div>
<div class="column" style="background-color:#ddd;">
  <div id="bottom-lab">
    <h2>Column 9</h2>
    <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div id="bottom-lab">
    <h2>Column 10</h2>
    <p>Some text..</p>
    </div>
  </div>
</div>

【讨论】：

没错，但宽度和高度必须相同
这个答案正是我想要的，但与结果相差甚远，因为宽度和高度必须相同
使用一些小的 jQuery 我们也可以做到这一点。让我更新你。

【解决方案7】：

注意 ID，ID 必须是唯一的，并且不能重复相同的 ID。将你的 id=bottom-lab 替换为 class='bottom-lab' 它将更好地工作并且对 ws3 友好。

【讨论】：