Question

我有几层div，初始设置背景图片（包括将div尺寸设置为屏幕尺寸）等，最后一个是一些文字。我希望文本然后排在包含背景图像的div的底部。我每隔几秒就使用javascript来更改背景图片和文本，所以这是我的HTML。

<section class="documentary" id='documentary'>
    <div class="documentary-bg">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-md-offset-7">
                    <div class='film-title' id="film1">
                       <h1>Flim 1 Title</h1>
                       <p>Text about film 1</p>
                    </div>
                    <div class='film-title' id="film2">
                      <h1>Film 2 Title</h1>
                      <p>Text about film 2.</p>
                    </div>
                    <div class='film-title' id="film3">
                       <h1>Film 3 Title</h1>
                       <p>Text about film 3.</p>
                       <a class="butt" data-toggle="modal" data-target="#myModal" id="modal-button">View Trailer</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

这是相关div的CSS。

.documentary {
    background: url(../img/film1.jpg) no-repeat top center rgb(255,255,255);
    background-attachment: fixed;
    background-position: 0%;
    background-size: 100%;
    color: #fff;
    -webkit-transition-property: background-image 300ms ease-in 200ms;
    -moz-transition-property: background-image 300ms ease-in 200ms;
    -o-transition-property: background-image 300ms ease-in 200ms;
    transition: background-image 300ms ease-in 200ms;
}

.documentary-bg {
    padding: 0 0;
    background: -webkit-linear-gradient(bottom, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Safari 5.1-6*/
    background: -o-linear-gradient(top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Fx 3.6-15*/
    background: linear-gradient(to top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Standard*/
    min-height:100vh;
    max-height: 100vh;
    display:table-cell;
    position:relative;
    vertical-align:bottom;
}

.film-title {
    display: inline-block;
}

简而言之，我想将.film-title与.documentary-bg的底部对齐。

我读到的所有内容都表示在{display: inline-block; vertical-align: bottom; }上使用div，您希望事物在底部对齐，但这只会导致最小高度被推翻并造成混乱。

Answer 1

你用Google搜索的是与其他元素相邻的元素。在您的情况下，您有两个解决方案：

要将行设置为position: relative;，请将文字设置为position: absolute; bottom: 0; right; 0;或
要使文字与背景图片容器的高度相同，请使用display: table-cell，如this Fiddle或下面的代码段所示。

.documentary {
    background: url(../img/film1.jpg) no-repeat top center rgb(255,255,255);
    background-attachment: fixed;
    background-position: 0%;
    background-size: 100%;
    color: #fff;
    -webkit-transition-property: background-image 300ms ease-in 200ms;
    -moz-transition-property: background-image 300ms ease-in 200ms;
    -o-transition-property: background-image 300ms ease-in 200ms;
    transition: background-image 300ms ease-in 200ms;
}

.documentary-bg {
    padding: 0 0;
    background: -webkit-linear-gradient(bottom, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Safari 5.1-6*/
    background: -o-linear-gradient(top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Fx 3.6-15*/
    background: linear-gradient(to top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Standard*/
    min-height:100vh;
    max-height: 100vh;
    position:relative;
}
.documentary-bg div {
    height: 100vh;
    display: block;
    overflow: hidden;
}
.documentary-bg div.film-title {
    display: table-cell;
    vertical-align: bottom;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="documentary" id='documentary'>
    <div class="documentary-bg">
        <div class="container">
            <div class="row">
                <div class="col-xs-5 col-xs-offset-7">
                    <div class='film-title' id="film1">
                       <h1>Flim 1 Title</h1>
                       <p>Text about film 1</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 2

如果没有你的其他css和你的图像玩它会很难确定你在哪里，所以我把它分解成更简单的术语。在下面的示例中，您有一个包装项目，其中包含三个相对定位的div。这里的关键是他们的位置：亲戚。嵌套在相对定位元素中的项目可以绝对地相对于父元素定位，因此div中的段落标记可以定位到底部以完成您需要的内容。您应该能够将该逻辑应用于您的设置。

＆＃13;

.wrapper {
  width: 100%;
}
div.item {
  width: 30%;
  border: 1px solid red;
  display: inline-block;
  height: 200px;
  position:relative;
}
div.item p {
  position: absolute;
  bottom: 0px;
  left: 5px;
}

＆＃13;

<div class='wrapper'>
  <div class="item">
    <p>
      Item 1
    </p>
  </div>
  <div class="item">
    <p>
      Item 2
    </p>
  </div>
  <div class="item">
    <p>
      Item 3
    </p>
  </div>
</div>

＆＃13;

将一个div与另一个div的底部对齐

2 个答案: