挑战：极其特殊的 CSS 布局

Amelie

1.4k214445

发布于
2013-04-21

面对下面这种布局，该如何下手呢？要求格子间需要有红色线条分隔，实在没有想出头绪 >,_,<

css html

阅读 7.9k

7 个回答

HJin_me

✓ 已被采纳

试试看这样行不行。

思路：

内部的红色边框用左边框和上边框实现。解决边框重复宽度翻倍的问题。内容可以横向和纵向自动扩展。（使用其他边框就不方便）
整体的左侧和上边的边框通过给父元素设置 margin-left, margin-top -1px 来隐藏掉。1px 是边框的宽度。

代码和效果看下面 jsfiddle。

http://jsfiddle.net/2bUZf/1/

angelscat

3923

发布于
2013-04-22

更新于
2013-04-22

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <style type="text/css">
            *{margin:0;padding:0;}
            body{padding:10px;}
            .wrap{width:263px;overflow:hidden;} /*宽度主要控制右侧显示*/
            ul{
                letter-spacing:-4px;
                font-size:0; 
                margin:-11px;/*上下左的负边距分别进行偏移隐藏多余部分，右负边距主要供li的display:inline-block提供多余空间*/
            } 

            li {
                height: 50px;
                width: 50px;
                border: 1px solid red;
                padding: 10px;
                margin-right: -1px;
                margin-bottom: -1px;/*li的负边距主要用于合并相邻的border*/
                display: inline-block;
                vertical-align: middle;
                *display: inline;
                zoom: 1;
                letter-spacing: 0;
                font-size: 12px;
            }
            li span {
                display: block;
                background: gray;
                height: 50px;
                width: 50px;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <ul>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
            </ul>
        </div>
    </body>
</html>

P酱

3.2k21021

发布于
2013-04-22

看到各种不同的方法了啊…… 于是我也来！

<!DOCTYPE html>
<html>
<head><title>test</title></head>
<style>
.wrap{
    width:450px;
}
.wrap ul{
    list-style:none;
}
.wrap ul li{
    float:left;
    width:100px;
    height:100px;
    border-top:1px solid #ee3300;
    border-right:1px solid #ee3300;
}

.wrap ul li:nth-child(4n){
    border-right:none;
}

.wrap ul li:nth-child(1),
.wrap ul li:nth-child(2),
.wrap ul li:nth-child(3),
.wrap ul li:nth-child(4){
    border-top:none;
}

</style>
<body>
    <div class="wrap">
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</body>
</html>

Pingse

发布于
2013-04-21

更新于
2013-04-21

新手上路，请多包涵

 <!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<style>
.wrap{
    width:450px;
}

.wrap ul{
    list-style:none;
}

.wrap ul li{
    float:left;
    width:100px;
    height:100px;
    background:#efefef;
    border-left:1px solid #ee3300;
    border-bottom:1px solid #ee3300;
}

.wrap ul li.left{
    border-left:none;
}

.wrap ul li.bottom{
    border-bottom:none;
}

</style>
<body>
    <div class="wrap">
        <ul>
            <li class="left">test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li class="left">test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li class="left bottom">test</li>
            <li class="bottom">test</li>
            <li class="bottom">test</li>
            <li class="bottom">test</li>
        </ul>
    </div>
</body>
</html>

Jeen

iCode

<!DOCTYPE HTML>
<html>
<head>
<title>layout</title>
<style>

*{padding:0;margin:0;}
.wrap{width:960px;margin:200px;}
.wrap ul{

    width:410px; /*与li相关*/
    background:white;/**/
    overflow:hidden; /*隐藏被拉出的部分（主要是边框部分）*/
    /*outline:1px solid red;/*测试查看*/

}
ul li{
    list-style:none;
    height:100px;
    width:100px;
    text-align:center;
    display:inline-block; /*or float:left*/
    *float:left;
    border-top: 2px solid #090; /*is different from border,here ,the outline is any value;*/
    border-left: 2px solid #090;
    margin:-5px;

    /*margin:-5px 0 0 -5px; /*attention:............hide the top and left at the li*/
    padding:1px; /*适当的边距，ul的width大小与li的width、margin、margin适当*/
    background:white;/**/
    line-height:6;
}
ul li a{

    height:100%;
    width:100%;
    text-align:center;
    display:block;
    margin:auto 0;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>

<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>

<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
</ul>
</div>

</body>
</html>

大大大大志

5728

发布于
2013-04-22

更新于
2013-04-22

手痒也来贴一贴，边框加粗了，这样看着爽点儿。。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<style>
*{margin:0;padding:0;}
li{list-style:none;}


.wrap{
    margin:20px ;
    width:346px;
    height: 346px;
    overflow:hidden;
}
.wrap ul{
    margin: -13px 0 0 -13px;
    width: 380px;
    overflow:hidden;
}
.wrap ul li{
    float:left;
    width:100px;
    height:100px;
    padding:10px;
    border-top:3px solid #ee3300;
    border-left:3px solid #ee3300;
}
.wrap ul li span{
    display:block;
    height:100px;
    background-color:#FFCFBF;
}


</style>
<body>
    <div class="wrap">
        <ul>
            <li><span>test</span></li>
            <li><span>test</span></li>
            <li><span>test</span></li>
            <li><span>test</span></li>
            <li><span>test</span></li>
            <li><span>test</span></li>
            <li><span>test</span></li>
            <li><span>test</span></li>
            <li><span>test</span></li>
        </ul>
    </div>
</body>
</html>