jquery - 在 CSS 中扩展边框而不向下推其他元素

Question

http://adamginther.com/timeline.php

出于投资组合的目的，我正在尝试创建我在该行业的历史时间表。

卡皮拉诺大学的蓝线在悬停时将其余元素向下推，有什么办法可以让它从底部延伸到顶部？我试过 position: absolute;但这没有做任何事情。

HTML

<div id="timeline-wrapper">
        <div id="timeline">
            <span class="circle"></span>
                <span class="timeline-element" id="capu">
                    <h1>Capilano University</h1>
                    <p>September 2012 - April 2014</p>
                </span>

                <span class="timeline-element bottom" id="spud">
                    <p class="work-description">I worked underneath the Senior VP of Customer Experience, along with the Lead Designer and the Lead Storyteller to help re-build the SPUD brand via banners, landing pages, and newsletters. I also spent three months building a new marketing website from the ground up</p>
                    <h1>SPUD</h1>
                    <p>May 2013 - March 2014</p>
                </span>

                <span class="timeline-element bottom" id="pandg">
                    <p class="work-description">
                    Working under technical lead Chris Ng, the technologies I primarily used were HTML, CSS, JavaScript/jQuery, Git, and WordPress. Over the span of six weeks I built a WordPress plug-in for Leaflet, imported a blog for Vitala Foods, and created a fake kale store, and many other various bug fixes and small projects.</p>
                    <h1>Pound & Grain</h1>
                    <p>March 2014 - April 2014</p>
                </span>

                <span class="timeline-element bottom" id="relentless">
                    <p class="work-description">Relentless Technology is a small boutique agency in North Vancouver with clients such as Blast Radius, Wunderman, and Levi's. My primary role was to perform maintainence and bug fixes in WordPress, HTML, CSS, and JavaScript for their 300+ clients.</p>
                    <h1>Relentless Technology</h1>
                    <p>April 2014 - July 2014</p>
                </span>


            <span class="circle right"></span>
        </div>
    </div>

CSS

#timeline {
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 7px solid #25b67b;
    position: relative;
    transition: 0.2s;

}
.bordernone {
    border-bottom: 0 !important;
    transition: 1s;
}
#timeline-wrapper {
    position: relative;
    padding: 175px 0;
}
#timeline .circle {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 7px solid #25b67b;
    background: white;
    display: inline-block;
    position: absolute;
    top: 85px;
    z-index: 1;
    transition: 0.2s;
    cursor: pointer;
}
#timeline .circle.right {
    right: 0;
}
#timeline .circle:hover {
    background: #25b67b;
}
#timeline .timeline-element {
    position: relative;
    cursor: pointer;
    display: inline-block;
}
#timeline .timeline-element.bottom {
    position: absolute;
    top: 110px;
}
#timeline .work-description {
    text-align: left !important;
    padding: 10px 20px;
    display: none;
    transition: 0.5s !important;
    position: relative;
    min-height: 150px;
}
#timeline #capu {
    border-bottom: #015289 5px solid;
    background: url(../img/arrow-capu.png) no-repeat center bottom;
    background-size: 35px;
    width: 66%;
    margin-left: 39px;
    cursor: pointer;
    transition: 0.2s;
}
#timeline #capu:hover {
    border-bottom: #015289 15px solid;
}
#timeline #spud {
    border-top: #efad36 5px solid;
    background: url(../img/arrow-spud.png) no-repeat center top;
    background-size: 35px;
    width: 28%;
    position: absolute;
    left: 13%;
    transition: 0.1s;
}
#timeline #spud:hover {
    border-top: #efad36 10px solid;
}
#timeline #spud .work-description {
    background: #efad36;
}
#timeline #pandg {
    border-top: #ef4035 5px solid;
    background: url(../img/arrow-pandg.png) no-repeat center top;
    background-size: 35px;
    width: 28%;
    position: absolute;
    left: 41%;
    transition: 0.1s;
}
#timeline #pandg .work-description {
    background: #ef4035;
}
#timeline #pandg:hover {
    border-top: #ef4035 10px solid;
}
#timeline #relentless {
    border-top: #f89728 5px solid;
    background: url(../img/arrow-relentless.png) no-repeat center top;
    background-size: 35px;
    width: 28%;
    position: absolute;
    left: 69%;
    transition: 0.1s;
}
#timeline #relentless:hover {
    border-top: #f89728 10px solid;
}
#timeline #relentless .work-description {
    background: #f89728;
}
#timeline .timeline-element h1 {
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 0;
    text-align: center;
}
#timeline .timeline-element p {
    text-align: center;
}

JS

$(document).ready(function() {
    $('html').click(function() {
        $('.work-description').hide();
    });
    $('#spud').click(function() {
        event.stopPropagation();
        $('#spud .work-description').show();
    });
    $('#pandg').click(function() {
        event.stopPropagation();
        $('#pandg .work-description').show();
    });
    $('#relentless').click(function() {
        event.stopPropagation();
        $('#relentless .work-description').show();
    });
    $('#capu').click(function() {
        event.stopPropagation();
        $('#capu .work-description').show();
    });

});

Answer 1

如果您将框模型设置为 border-box，那么无论您对边框、填充等做了什么，整体高度都将保持相同:

.borderBox {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

这将有效地“让这些东西在内部发生变化”。

这是一个 fiddle :http://jsfiddle.net/X3duL/3/

这里有一个很好的总结:

http://www.paulirish.com/2012/box-sizing-border-box-ftw/