四分五裂布局

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>

显示效果