想用css实现45°斜角地图中出现间隔无法消除

问前端UI的兄弟一个问题。我想用css布局一个45°斜角的地图,实现了两行的无缝对接,后面我想用这两行循环,但是出现了问题,中间出现了一片空白间隔,始终无法消除,请问有啥办法没?最好不要用绝对定位或者每行都要设置translate的办法,因为地图可能有几百行。效果图如下:
图片说明

文件的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .main{ width:520px; height:1000px; margin:0px auto; background:#CCCCCC;}
    /*.map_1{ width:150px; height:150px; background:#009933;transform: rotate(45deg); float:left;}*/
    /*.map_1{ width:85px; height:85px; background:#009933;transform: rotate(45deg) translate(30px); float:left;}*/
    .map_1{ width:80px; height:80px; background:#009933;transform: rotate(45deg) scale(0.72); float:left; }
    .map_2{ width:80px; height:80px; background:#CC9900;transform: rotate(45deg) scale(0.72) translate(-100%); -webkit-transform: translate(-100%); float:left;}
</style>
</head>

<body>
<div class="main">
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
</div>
</body>
</html>

1个回答

这种好像最好用会计元素,非要div的话,
我知道一个可以通过外面包div设置margin可以实现,不过就是麻烦很多。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .main{ width:480px; height:1000px; margin: 40px auto; background:#CCCCCC;overflow: hidden;} /**/
    /*.map_1{ width:150px; height:150px; background:#009933;transform: rotate(45deg); float:left;}*/
    /*.map_1{ width:85px; height:85px; background:#009933;transform: rotate(45deg) translate(30px); float:left;}*/
    .map_1{ width:80px; height:80px; background:#009933;transform: rotate(45deg) scale(0.72);}
    .map_2{ width:80px; height:80px; background:#CC9900;transform: rotate(45deg) scale(0.72);}
    /*.green{ width: 480px;height: 80px; margin: -40px 0px 0px 0px;}*/
    .yellow{width: 560px;height: 80px; margin: -40px 0px 0px -40px;}
    .green .map_1{ float:left; margin: -40px 0px 0px 0px;}
    .yellow .map_2{ float:left;  margin: -40px 0px 0px 0px;}
    .tab{margin: -80px 0px 0px 0px;}
</style>
</head>

<body>
<div class="main">
    <div class="tab">
        <div class="green">
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
        </div>
        <div class="yellow">
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
        </div>
    </div>
    <div class="tab">
        <div class="green">
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
        </div>
        <div class="yellow">
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
        </div>
    </div>
    <!--重复tab-->
</div>
</body>
</html>

坐等更好的

ssd001001
flypig_1 谢谢,貌似也没有更好的了,用top和left也可以定位,反正不管咋样都得定位
大约一个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!