Question

我遇到了在图像底部对齐div的问题。 div包含一个p标签，可以有一行或多行文本，具体取决于句子的长度和屏幕大小。理想情况下，无论p标签中的内容和当前使用的屏幕尺寸如何，我都希望带有p标签的div始终设置在它顶部的图像的下边缘。问题是，当p标签中存在更多文本时，div的高度向下延伸超过图像。我尝试过使用margin-top，但这并不是可靠的响应。有没有办法完成将div保持在图像底部的任务，无论所述div的内容如何？

以下是我所拥有的html设置：

<div class="Sub-Banner-Container Right-Sub-Banner clearfix">
   <div class="Banner-Image-Container clearfix" style="background-image: url('/img/Banner-Image-Left.jpg')">
      <div class="Sub-Banner-Inner clearfix">
         <h1 class="Sub-Banner-Headline Right-Headline Dark-Text">Lorem ipsum dolor sit amet</h1>
          <div class="Sub-Banner-Overlay Right-Overlay clearfix">
              <p class="Sub-Banner-Sub-Headline Dark-Text">Maecenas at pellentesque quam, eget placerat nisi. Fusce eu urna arcu. Ut consequat eros eu metus accumsan elementum.</p>
           </div>
      </div>
  </div>
</div>

div Sub-Banner-Overlay具有透明背景颜色，并包含p标签Sub-Banner-Sub-Headline，可包含任意数量的字符。 div Banner-Image-Container包含我想要保留Sub-Banner-Overlay的图像。

一些CSS：

.Sub-Banner-Container {
    float: none;
    height: auto;
    margin: 0 auto;
    clear: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    @include breakpoint(830px) {
        padding: 20px;
        height: auto;
    }
    @include breakpoint(540px) {
        margin-left: auto;
        margin-right: auto;
    }
    .Banner-Image-Container {
        float: none;
        height: auto;
        margin: 0 auto;
        clear: none;
        width: auto;
        max-width: 1040px;
        background-attachment: scroll;
        background-size: cover;
        min-width: 0;
        background-position: 50% 0;
        background-repeat: no-repeat no-repeat;
        @include breakpoint(1060px) {
            width: 100%;
            max-width: none;
        }
        @include breakpoint(540px) {
            background-position: 100% 0;
        }
        .Sub-Banner-Inner {
            float: none;
            height: auto;
            margin: 0 auto;
            clear: none;
            width: 100%;
            min-width: 0;
            @include breakpoint(1060px) {
                max-width: none;
            }
            @include breakpoint(650px) {
                height: 235px;
            }
            @include breakpoint(540px) {
                height: 350px;
            }
            @include breakpoint(460px) {
                height: 300px;
            }
            @include breakpoint(380px) {
                height: 251px;
            }
            .Sub-Banner-Overlay {
                float: none;
                height: 100px;
                margin-left: auto;
                margin-top: 242px;
                clear: none;
                width: 100%;
                background: rgba($box-shadow,.65);
                margin-right: auto;
                min-width: 0;
                display: table;
                @include breakpoint(650px) {
                    margin-top: 150px;
                }
                @include breakpoint(572px) {
                    margin-top: 125px;
                }
                @include breakpoint(540px) {
                    margin-top: 240px;
                }
                @include breakpoint(460px) {
                    margin-top: 189px;
                }
                @include breakpoint(427px) {
                    margin-top: 165px;
                }
                @include breakpoint(380px) {
                    margin-top: 117px;
                }
                @include breakpoint(331px) {
                    margin-top: 90px;
                }
                .Sub-Banner-Sub-Headline {
                    float: none;
                    font-size: 20px;
                    width: 99.808061%;
                    text-align: left;
                    font-weight: normal;
                    line-height: normal;
                    margin: 0 auto;
                    clear: none;
                    min-height: 0;
                    display: table-cell;
                    vertical-align: middle;
                    min-width: 0;
                    padding: 16px 20px;
                    opacity: 1;
                    z-index: 0;
                }
            }
        }
    }
}

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

Answer 1

您希望在图像容器上使用position:relative;和在文本容器上使用position:absolute;。看看这个fiddle。

无论图像的高度如何，您的文字都将完全定位到图像容器的底部。

Answer 2

如果您将div.image替换为您的图片，这应该可行。 div容器的高度应该增加并向上移动而不是在图像容器之外突破。

如果不看你的CSS，很难说，但这个简单的例子显示了你的基本要求。

.image{background:#CCC;height:400px;position:relative;width:400px}
.content{background:#999;position:absolute;bottom:0;width:80%}
p{font-size:14px;padding:5px}

<div class="image">
  <div class="content">
    <p>Lorem ispum dolor Lorem ispum dolor Lorem ispum dolor Lorem ispum dolor Lorem ispum dolor Lorem ispum dolor Lorem ispum dolor Lorem ispum dolor</p>
  </div>
</div>

无论文本行如何，都将一个div与所有屏幕尺寸的图像底部对齐

2 个答案: