Question

Current

所以我想知道在Goal

中获得所需结果的最佳方式或最佳方式是什么

我认为使用我目前的css知识可以实现的两种方法是通过使包含div具有静态高度或通过将h1元素放置在div的底部。

所以我想知道的是我应该关注的css属性以及获得我想要的结果的首选方法。

干杯

Answer 1

你可以尝试这样，你需要元素（vertical-align:bottom）中的display:table-cell和h1。

＆＃13;

h1{
	background:#333;
	color:#fff;
	height:50px;
	vertical-align:bottom;
	display:table-cell;
	width:500px;
}

＆＃13;

<h1>text</h1>

＆＃13;

我希望它会对你有所帮助。

Answer 2

有几种方法可以实现您的目标：

在底部设置div的静态高度和位置h1绝对值。
让h1使用填充来定义div的高度。

.test1 {
  background-color: grey;
  height: 100px;
  position: relative;
}
.test1 h1 {
  color: white;
  position: absolute;
  bottom: 0;
  margin: 0;
}
.test2 {
  background-color: grey;
}
.test2 h1 {
  color: white;
  margin: 0;
  padding: 50px 0 0;
}

<div class="test1">
  <h1>Testing</h1>
</div>
<br/>
<div class="test2">
  <h1>Testing</h1>
</div>

示例：http://jsfiddle.net/7uax3pa5/2/

Answer 3

如果您希望将背景与基线对齐，则可以使用伪元素执行此操作。

＆＃13;

executeOnExecutor()

＆＃13;

h2::before, h1::before{
    content: "";
    display: inline-block;
    height: 2em;
    background: gray;
    width: 100%;
    margin-right: -100%;
}
h2{
    color: white;
}

＆＃13;

将h1移动到div的底部

3 个答案: