Question

我有一个div，我在下一个和之前的博客文章中显示。我将标题放在一个容器(footer_post_title)和年份中，并在下面的另一个容器(footer_post_buttons)中“读取更多按钮”。无论标题在(blog_image_footer)中有多长时间，我都需要让第二个容器留在主容器(footer_post_title)的底部。我怎样才能做到这一点？

<div class="col-md-6 more-articles-left">
    <div class="more-articles previous">
        <div class="blog_image_footer">
            <div class="row artikkel-title-previous" style="height:100%; background: linear-gradient(24deg, rgba(167, 85, 194, 0.9), rgba(219, 197, 218, 0.9)), url('/files/blog_pictures/o-KID-EATING-facebook.jpg') no-repeat center center /cover">
                <div class="container footer_post_title">
                    <div class="col-md-12">
                        <h1 class="blog_post_title_footer">How to teach Your kids to eat healthy</h1>
                    </div>
                </div>
                <div class="container footer_post_buttons">
                    <p class="blog_post_year_footer">December 2016</p>
                    <a href="article.php?article_title=how-to-teach-your-kids-to-eat-healthy" class="btn btn-default btn-footer-read-more" name="read-more-article">Read now!</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以将position: relative设置为容器，将position: absolute设置为其子容器，这样您就可以将子元素定位为父元素的参考。

之后，您可以为孩子设置bottom: 0，以便将孩子固定在其容器的底部。

.blog_image_footer{
    position: relative;
}

.footer_post_buttons{
    position: absolute;
    bottom: 0;
}

Answer 2

您可以使用以下基本原则：

＆＃13;

*{
  box-sizing: border-box;
}
body, html{
  height: 100%;
  width: 100%;
  margin: 0;
}
body{
  display:flex;
  flex-direction: column;
}
#container
{
    margin: 0 auto;
    width:100%;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
    flex-grow:1;
    display:flex;
}
#footer,#header
{
    margin: 0 auto;
    width:100%;
    text-align: center;
    height:1.5em;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
}

＆＃13;

<div id="header">
header here
</div>
<div id="container">
this is container
</div>
<div id="footer">
footer here
</div>

＆＃13;

Answer 3

尝试使用bootstraps网格系统： http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

这应该允许你使h1容器响应。

如何将容器定位到固定位置？

3 个答案: