四分五裂布局

CSS

<style type="text/css">
ul, ol, li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
</style>

<style type="text/css">
.ebox {
    width: 500px;
    height: 100%;
    display: table;
    border: 1px solid #DDD;
}
.ebox-i {
    position: relative;
    float: left;
    width: 50%;
    padding: 15px 15px 20px;
    color: #777;
    border-bottom: 1px dashed #DDD;
    font-size: 12px;
    text-align: center;
    line-height: 1.42857;
}

.ebox-i:hover {
    background-color: #F9F9F9;
}

.ebox-01, .ebox-03 {
    border-right: 1px dashed #DDD;
}

.ebox-100 {
    width: 100%;
    margin-bottom: 0px;
    border-bottom: medium none;
}
</style>

JS

<script type="text/javascript">
    $(".ebox-i").each(function() {
        $(this).hover(
            function() {
                $(this).find(".desc").animate({height: '100%', opacity: 'show'});
            },
            function() {
                $(this).find(".desc").animate({height: '0', opacity: 'hide'});
            }
        );
    });
</script>

页面

<ul class="ebox">
    <li class="ebox-i ebox-01">
        <h4>视觉中国</h4>
        <p>视觉创意产业门户</p>
    </li>
    <li class="ebox-i ebox-02">
        <h4>视觉中国</h4>
        <p>视觉创意产业门户</p>
    </li>
    <li class="ebox-i ebox-03">
        <h4>视觉中国</h4>
        <p>视觉创意产业门户</p>
    </li>
    <li class="ebox-i ebox-04">
        <h4>视觉中国</h4>
        <p>视觉创意产业门户</p>
    </li>
    <li class="ebox-i ebox-100">
        <h4>主题定制</h4>
        <p>完全按照您的需求量身打造，此项服务需要排期，具体请联系我们</p>
        <a class="btn btn-danger" href="">联系我们</a>
    </li>
</ul>

显示效果