在div容器内的div行底部对齐按钮

时间:2018-06-29 15:43:31

标签: html css

我有一个网页,上面有“卡片”行,每行包含一个img,下面的一些文本以及一个按钮样式的链接。文字的长度各不相同,但我希望每张卡的长度均等,并且按钮要朝着每张卡的底部对齐。

<!--Grid row-->
<div class="row">
    <!--Grid column-->
    <div class="col-lg-3 col-md-12 mb-4">
        <!--Card-->
        <div class="card">
            <!--Card image-->
            <div class="view overlay">
                <img src="img/bb/didyouknow.jpg" class="card-img-top" alt="">
                <a href="didyouknow.html" onclick="trackOutboundLink(this, 'Internal Links', 'Did You Know'); return false;">
                    <div class="mask rgba-white-slight"></div>
                </a>
            </div>
            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Did you know?</h4>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="didyouknow.html" class="btn btn-primary" onclick="trackOutboundLink(this, 'Internal Links', 'Did You Know'); return false;">More</a>
                <!--<button id="didyouknow" type="button" onclick="window.open('didyouknow.html','_self'); trackOutboundLink(this, 'Internal Links', 'Did You Know'); return false;" class="btn btn-primary">More</button>-->
            </div>
        </div>
        <!--/.Card-->
    </div>
    <!--Grid column-->
    <!--Grid column-->
    <div class="col-lg-3 col-md-6 mb-4">
        <!--Card-->
        <div class="card">
            <!--Card image-->
            <div class="view overlay">
                <img src="img/bb/tipsntricks.jpg" class="card-img-top" alt="">
                <a href="staysmokefree.html" onclick="trackOutboundLink(this, 'Internal Links', 'Stay Smoke Free'); return false;">
                    <div class="mask rgba-white-slight"></div>
                </a>
            </div>
            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Stay smoke free</h4>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.</p>
                <a href="staysmokefree.html" class="btn btn-primary" onclick="trackOutboundLink(this, 'Internal Links', 'Stay Smoke Free'); return false;">More</a>
                <!--<button type="button" onclick="window.open('staysmokefree.html','_self');" class="btn btn-primary">More</button>-->
            </div>
        </div>
        <!--/.Card-->
    </div>
    <!--Grid column-->
</div>
<!--Grid row-->

此CSS通过使卡的高度填充父div来使每张卡具有相同的高度:

.row {
    display: flex; /* equal height of the children */
    position:relative;
}

.card{
    height: 100%;/* fill parent div height*/
}

我的问题是按钮没有水平对齐,因为它们只是位于文本结束处的下方。如果我这样做:

.card-body a {
    position: absolute;
    bottom: 10px;
}

按钮在卡的底部对齐,但它们重叠并覆盖了文本。如何使按钮显示在文本下方并在卡片之间对齐?

编辑:我制作了一个演示问题的jsfiddle:https://jsfiddle.net/captncanary/m156dqeu/

2 个答案:

答案 0 :(得分:0)

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
  
  h4, .h4 {
    font-size: 1.5rem;
  }
  
  .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
  
  
  @media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
  }
  
  .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
  
  .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  
  
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
  .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
  .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
  .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
  .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
  .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }
  
  
    .col-md-4 {
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .col-md-6 {
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-md-8 {
      -ms-flex: 0 0 66.666667%;
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .col-md-12 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
    }
  
    .col-lg-3 {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%;
    }
  
  .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
  
  .card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
  }
  
  .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
  }
  
  /* make cards on index page equal size and align buttons*/
  .row {
      display: flex; /* equal height of the children */
      position:relative;
  }
  
  .card{
      height: 100%;/* fill parent div height*/
  }
  
  .card-body a {
      position: absolute;
      bottom: 0px;
  }
  
  
  
  
  
  
  
  
  
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Demo</title>
       <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

    <!--Main Navigation-->
    <header>
    </header>
    <!--Main Navigation-->
    <!--Main layout-->
    <main class="mt-5">
        <!--Main container-->
        <div id="maincontainer" class="container">


            <!--Grid row-->
            <div class="row">

                <!--Grid column-->
                <div class="col-lg-3 col-md-12 mb-4">

                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <div class="view overlay">
                            <img src="img/bb/didyouknow.jpg" class="card-img-top" alt="">
                            <a href="didyouknow.html" onclick="trackClickedLink(this, 'Internal Links', 'Did You Know'); return false;">
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>

                        <!--Card content-->
                        <div class="card-body">
                            <!--Title-->
                            <h4 class="card-title">Did you know?</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="didyouknow.html" class="btn btn-primary" onclick="trackClickedLink(this, 'Internal Links', 'Did You Know'); return false;">More</a>
                            <!--<button id="didyouknow" type="button" onclick="window.open('didyouknow.html','_self'); trackClickedLink(this, 'Internal Links', 'Did You Know'); return false;" class="btn btn-primary">More</button>-->

                        </div>

                    </div>
                    <!--/.Card-->

                </div>
                <!--Grid column-->
                <!--Grid column-->
                <div class="col-lg-3 col-md-6 mb-4">

                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <div class="view overlay">
                            <img src="img/bb/tipsntricks.jpg" class="card-img-top" alt="">
                            <a href="ssf.html" onclick="trackClickedLink(this, 'Internal Links', 'SSF'); return false;">
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>

                        <!--Card content-->
                        <div class="card-body">
                            <!--Title-->
                            <h4 class="card-title">Stay smoke free</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="ssf.html" class="btn btn-primary" onclick="trackClickedLink(this, 'Internal Links', 'SSF'); return false;">More</a>
                            <!--<button type="button" onclick="window.open('staysmokefree.html','_self');" class="btn btn-primary">More</button>-->
                        </div>

                    </div>
                    <!--/.Card-->

                </div>
                <!--Grid column-->
                <!--Grid column-->
                <div class="col-lg-3 col-md-6 mb-4">

                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <div class="view overlay">
                            <img src="img/bb/htl.jpg" class="card-img-top" alt="">
                            <a href="timeline.html" onclick="trackClickedLink(this, 'Internal Links', 'Timeline'); return false;">
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>

                        <!--Card content-->
                        <div class="card-body">
                            <!--Title-->
                            <h4 class="card-title">Timeline</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="timeline.html" class="btn btn-primary" onclick="trackClickedLink(this, 'Internal Links', 'Timeline'); return false;">More</a>
                            <!--<button type="button" onclick="window.open('timeline.html','_self');" class="btn btn-primary">More</button>-->
                        </div>

                    </div>
                    <!--/.Card-->

                </div>
                <!--Grid column-->
                <!--Grid column-->
                <div class="col-lg-3 col-md-12 mb-4">

                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <div class="view overlay">
                            <img src="img/bb/yoursavings.jpg" class="card-img-top" alt="">
                            <a href="savings.html" onclick="trackClickedLink(this, 'Internal Links', 'Your Savings'); return false";>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>

                        <!--Card content-->
                        <div class="card-body">
                            <!--Title-->
                            <h4 class="card-title">Your Savings</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="savings.html" class="btn btn-primary" onclick="trackClickedLink(this, 'Internal Links', 'Your Savings'); return false;">More</a>
                            <!--<button type="button" onclick="window.open('savings.html','_self');" class="btn btn-primary">More</button>-->
                        </div>

                    </div>
                    <!--/.Card-->

                </div>
                <!--Grid column-->

            </div>
            <!--Grid row-->
            
        </div>
        <!--Main container-->
    </main>
    <!--Main layout-->
    <!--Footer-->
    <footer class="page-footer text-center text-md-left font-small pt-4 mt-4">
    </footer>
    <!--/.Footer-->
    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
</body>

</html>

答案 1 :(得分:0)

过去,我需要实现相同的布局,最适合我的解决方案是使用 flexbox

基本上,我需要将“上层内容”与“页脚内容”分开,然后将justify-content: space-between;设置为正文。

enter image description here

Here, is a working example in JSFiddle of what I tried to explain

总结更改:

  • 将您的上层内容(例如标题和说明)包装在<div class="card-content">内,按钮应位于此元素之外。

  • 将以下样式设置为.card-body

CSS

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
  • align-self: flex-start;设置为按钮以保留其宽度。

我希望对您有帮助