Question

出于投资组合的目的，我正在努力创建一个行业历史的时间表。

Capilano大学的蓝线在悬停时将其余元素向下推，是否有任何方法可以让它从底部延伸到顶部？我尝试过的位置：绝对;但那并没有做任何事情。

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;
}

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

这是一个小提琴：http://jsfiddle.net/X3duL/3/

这里有一个很好的纲要：

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

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

1 个答案: