固定div Css内的位置

Question

我需要在div中安排一些元素。问题是我无法修改html代码，所以我需要通过css来解决它。

我有这些博文：

问题是当标题或内容太长时，“阅读更多”按钮会向下移动。我需要将按钮固定在博客文章的底部，因为它位于第二篇文章中。

这是我正在使用的代码：

<div class="contact_con blog-posts">

    <div class="loop-entry-thumbnail">
    <a href="http://staging.princetonpartners.com/the-magic-of-viceland/" title="The Magic of Viceland">
      <img src="http://staging.princetonpartners.com/wp-content/uploads/The-Magic-of-Viceland.jpg" alt="The Magic of Viceland" title="The Magic of Viceland" width="100%">
         </a>
         </div>
  <div class="loop-entry-content clr">
      <header>
       <h2 class="loop-entry-title entry-title">
        <a href="http://staging.princetonpartners.com/the-magic-of-viceland/">The Magic of Viceland...</a>
       </h2>
      </header>
     <div class="loop-entry-excerpt entry clr blog_loop_entry_title">
         I’m part of a generation that rarely watches traditional cable news, and instead ab...<br>
      <span class="home_readmore home_readmore_button"><a href="http://staging.princetonpartners.com/the-magic-of-viceland/">Read more</a></span>
          </div>
        </div>

       </div>

我尝试过的位置：绝对和相对，但它没有解决这个问题。

Answer 1

你应该限制loop-entry-content的高度，然后绝对位置就可以了：

.blog-posts {
  width: 33%;
  height: 200px;
}
.loop-entry-content {
  position: relative;
  height: 200px;
  max-height: 200px;
}
.home_readmore {
  display: block;
  position: absolute;
  bottom: 10px;
  right: 20px;
}

<div class="contact_con blog-posts">

    <div class="loop-entry-thumbnail">
    <a href="http://staging.princetonpartners.com/the-magic-of-viceland/" title="The Magic of Viceland">
      <img src="http://staging.princetonpartners.com/wp-content/uploads/The-Magic-of-Viceland.jpg" alt="The Magic of Viceland" title="The Magic of Viceland" width="100%">
         </a>
         </div>
  <div class="loop-entry-content clr">
      <header>
       <h2 class="loop-entry-title entry-title">
        <a href="http://staging.princetonpartners.com/the-magic-of-viceland/">The Magic of Viceland...</a>
       </h2>
      </header>
     <div class="loop-entry-excerpt entry clr blog_loop_entry_title">
         I’m part of a generation that rarely watches traditional cable news, and instead ab and instead ab and instead ab...<br>
      <span class="home_readmore home_readmore_button"><a href="http://staging.princetonpartners.com/the-magic-of-viceland/">Read more</a></span>
          </div>
        </div>

       </div>

Answer 2

您可以在内容类＆＃34;循环输入内容＆＃34;中定义高度，以便您的按钮保持固定位置

Answer 3

尝试添加此CSS

  angular.module('app', [])
        .controller('TestCntrl', function TestCntrl($scope) {
            $scope.value = 50000.23;
        })
        .directive('numberFormatter', ['$filter', function ($filter) {
            return {
                restrict: 'A',
                require: 'ngModel',
                scope: { 'decimal': '=decimal' },
                link: function (scope, element, attr, ngModel) {
                    ngModel.$parsers.push(whatToSet);
                    ngModel.$formatters.push(whatToShow);
                    element.bind('blur', function () {
                        element.val(whatToShow(ngModel.$modelValue, scope.decimal))
                    });
                    element.bind('focus', function () {
                        element.val(ngModel.$modelValue);
                    });
                    function whatToSet(str) {
                        var num = 0
                        var numbe = num !== undefined ? num : 0;
                        var strr = str.toString();
                        strr = strr.replace(',', '.');
                        numbe = parseFloat(strr);
                        return numbe;
                    }
                    function whatToShow(num) {
                        if (num) {
                            return '$' + $filter('number')(num, scope.decimal);
                        } else {
                            return '';
                        }
                    };
                }
            };
        }]);

这应该有效

Answer 4

您可以将弹性框CSS用于父元素（父级或您的命名类）。这将解决身高问题。

.parent
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

<div class="parent">
  <div class="contact_con blog-posts">

  </div>
</div>