Question

我使用带有三列内容的Foundation＆＃block块网格。第二列和第三列有边框左边但是我试图找出一种方法来匹配基于最大列的边框高度。有没有办法只做这个CSS？

我的css：

ul li:nth-child(2), ul li:nth-child(3) { border-left: 1px solid red; }

http://jsfiddle.net/Sbt75/377/

Answer 1

我认为Foundation block grid不适合你。根据您的需要，请参阅此jsFiddle：

http://jsfiddle.net/P8Ve9/

使用表格和表格单元格属性，可以使高度填充其父高度。

<强> CSS

ul li:nth-child(2), 
ul li:nth-child(3) { border-left: 1px solid red; }
ul { display: table; width: 100%; margin: 0; padding: 0; }
ul li { display: table-cell; width: 33.3%; background: #fff; margin: 0; padding: 10px 20px; height: 100%; }

<强> HTML

<ul>
        <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a augue eget enim elementum tincidunt quis vitae massa. Proin vel felis ut mauris hendrerit blandit ut nec libero. Morbi et turpis magna. Phasellus sit amet augue tristique, faucibus lorem id, ullamcorper metus. Praesent ultricies nunc a sem vestibulum, vel aliquet est scelerisque. Quisque nunc leo, vulputate ut felis sit amet, tristique vestibulum libero. Morbi placerat libero a enim tempus egestas.</p>

            <p>Aenean viverra non diam sagittis ultrices. Maecenas eget risus a lorem rutrum eleifend eget vel tortor. Etiam nunc arcu, suscipit non lobortis et, elementum sit amet libero. Ut ullamcorper eleifend dolor sed luctus. Cras sit amet auctor ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pharetra auctor ligula eget laoreet. Vestibulum at varius nisl. Praesent vitae hendrerit lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ac porttitor est, in molestie magna. Quisque eu nibh fringilla, ullamcorper nisi quis, aliquam diam. Nunc non vestibulum orci. Morbi sollicitudin, velit id pharetra varius, nulla quam porttitor nibh, eget pellentesque lorem enim eget sapien.</p>

            <p>Aenean venenatis, nunc ut pulvinar imperdiet, leo tellus ullamcorper risus, quis dapibus nisl quam sit amet ipsum. Aliquam congue nulla blandit, posuere libero ac, egestas magna. Pellentesque vestibulum tellus sed ligula varius, ut sodales libero eleifend. Aenean sit amet interdum ante. In vitae justo sit amet est hendrerit pharetra. Proin pretium mauris tincidunt fermentum auctor. Praesent ac tincidunt nunc.</p>

            <p>Suspendisse eu nulla nisi. Praesent facilisis, justo eu egestas fermentum, arcu urna ullamcorper sem, ac suscipit odio nisi at nibh. Duis laoreet leo diam, at hendrerit neque sollicitudin ornare. Maecenas lacinia sodales justo non pellentesque. Suspendisse condimentum quis turpis sit amet malesuada. Donec posuere ullamcorper mi, ut vehicula diam. Integer consectetur elit ligula, a commodo ligula ornare eget. Duis porta quis erat et mollis. Nam viverra rhoncus justo. Integer tincidunt risus lectus, eget vehicula velit ornare sit amet. Aenean facilisis vehicula sagittis.</p>

<p>Duis vestibulum ante diam, at luctus est ultricies ac. Nullam in consequat dolor, vitae volutpat tortor. Maecenas mollis velit quis odio aliquet, eu luctus nisi volutpat. Quisque vel eros id arcu pretium blandit vitae in est. Fusce hendrerit mi et lobortis bibendum. Suspendisse quis sapien fringilla velit commodo laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer arcu magna, venenatis sit amet fermentum et, vulputate sit amet dui. Vivamus dapibus lorem in luctus auctor. Mauris bibendum pulvinar lorem. Nunc mi urna, iaculis quis sem vel, feugiat feugiat felis. In id egestas nisi. Quisque ut euismod risus. Curabitur quis nisl dolor.</p></li>

  <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a augue eget enim elementum tincidunt quis vitae massa. Proin vel felis ut mauris hendrerit blandit ut nec libero. Morbi et turpis magna. Phasellus sit amet augue tristique, faucibus lorem id, ullamcorper metus. Praesent ultricies nunc a sem vestibulum, vel aliquet est scelerisque. Quisque nunc leo, vulputate ut felis sit amet, tristique vestibulum libero. Morbi placerat libero a enim tempus egestas.</p>

      <p>Aenean viverra non diam sagittis ultrices. Maecenas eget risus a lorem rutrum eleifend eget vel tortor. Etiam nunc arcu, suscipit non lobortis et, elementum sit amet libero. Ut ullamcorper eleifend dolor sed luctus. Cras sit amet auctor ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pharetra auctor ligula eget laoreet. Vestibulum at varius nisl. Praesent vitae hendrerit lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ac porttitor est, in molestie magna. Quisque eu nibh fringilla, ullamcorper nisi quis, aliquam diam. Nunc non vestibulum orci. Morbi sollicitudin, velit id pharetra varius, nulla quam porttitor nibh, eget pellentesque lorem enim eget s.</p></li>

        <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a augue eget enim elementum tincidunt quis vitae massa. Proin vel felis ut mauris hendrerit blandit ut nec libero. Morbi et turpis magna. Phasellus sit amet augue tristique, faucibus lorem id, ullamcorper metus. Praesent ultricies nunc a sem vestibulum, vel aliquet est scelerisque. Quisque nunc leo, vulputate ut felis sit amet, tristique vestibulum libero. Morbi placerat libero a enim tempus egestas.</p>

            </li>
</ul>

如果你想要一个jQuery路线，这里有一个小插件，你可以用来将高度与最高的项目相匹配。

$.fn.matchHeights = function(options) {

        var settings = $.extend({

            selector: "",
            setTo: "highest"

        }, options);

        var setToHeight = 0,
            methods = {

                getHeight: function(el) {
                    return $(el).height();
                },
                getFinalHeight: function() {
                    return setToHeight;
                },
                setHeights: function(el) {
                    $(settings.selector, el).height(methods.getFinalHeight);
                },
                findChildren: function(el) {

                    if ( settings.selector.length > 0 ) {

                        return $(settings.selector, el);

                    }

                    return $(el).children();

                }

            };

        return this.each(function() {

            methods.findChildren(this).each(function() {

                if( methods.getHeight(this) > setToHeight ) {
                    setToHeight = methods.getHeight(this);
                }

            });

            methods.setHeights(this);

        });

    };

然后你会这样使用......

$("#parent-container").matchHeights({ selector: ".item" });

Answer 2

global.equalHeight($('.candidate-list').find('.succession-candidate-container'),10);
    $(window).resize(function(){
        $('.candidate-list').find('.succession-candidate-container').attr('style','');
        global.equalHeight($('.candidate-list').find('.succession-candidate-container'),10);
    });

var equalHeight = function(group, padding) {
var tallest = 0;
if(padding == undefined){
    var padding = 0
}
group.each(function() {
    var thisHeight = $(this).outerHeight(true);
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
});
group.height(tallest+padding);
}

结束了JS路线。这对我们有用。

基础块网格边界高度

2 个答案: