10

CSS 属性を使用して、要素間borderに細かい1pxグリッドを作成したいと考えています。span

     |    
  1  |  2  
-----|-----
  3  |  4  
     |

これは私が現在持っているものです。明らかにうまくいきません。

<html>
<head>
<style>
  div {
    width: 204px;
  }
  span {
    display: inline-block;
    height: 100px;
    width: 100px;
    border: 1px solid #ccc;
    border-left-width: 0;
    border-top-width: 0;
  }
</style>
</head>
<body>
<div><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body>
</html>

が にdiv設定され306px、要素がリフローすると、ソリューションは動的に適応する必要があります。

     |     |
  1  |  2  |  3
-----|-----|-----
  4  |
     |

できれば CSS のみ、または純粋な Javascript を使用してください。IE7 などの古いブラウザは無視できます。

4

5 に答える 5

3

1. HTML+CSSソリューション

HTML:

<div>
    <i></i>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <i></i>
</div>​

CSS:

div {
    position: relative;
    width: 202px;  /* or 303px (or 100px * n + n) */
    font-size: 0;
}

span {
    display: inline-block;
    height: 100px;
    width: 100px;
    border: 1px solid #ccc;
    border-left-width: 0;
    border-top-width: 0;
    font-size: 12px;
}

i {
    position: absolute;
    background: #fff;
    height: 1px;
    bottom: 0;
    left: 0;
    width: inherit;
}

​i:first-child {
    height: auto;
    width: 1px;
    top: 0;
    left: auto;
    right: 0;
}​

デモ: http://jsfiddle.net/HTgKJ/

2. HTML+CSS+JavaScriptソリューション

HTML+CSS:

<!-- See approach 1. -->

JavaScript:

var block = document.querySelectorAll(".block");
for (var i = 0; i < block.length; i++) {
    var spanWidth = block[i].querySelector("span").clientWidth,
        n = Math.floor(block[i].clientWidth / spanWidth);
    
    block[i].querySelector("i:first-child").style.left =
        (n * spanWidth + (n - 1)) + "px";
}​

デモ: http://jsfiddle.net/HTgKJ/1/

于 2012-12-09T23:27:35.780 に答える
1

私はこのソリューションを使用しています。これは自動的に境界線を設定します。

http://jsfiddle.net/aLz2T/3/

HTML

<div><span>1</span><span>2</span><span>3</span><span>4</span></div>​

CSS

div {
    width: 204px; /* adjust to get less/more columns */
}

span {
    display: inline-block;
    height: 100px;
    width: 100px;
    border: 1px solid #ccc;
    border-left-width: 0;
    border-top-width: 0;
}​

JavaScript

var a = document.querySelector('div');

// columns
var b = parseInt(a.offsetWidth / (100 + 2), 10);

for(var c, d = document.querySelectorAll('span'), e = d.length, i = 0; c = d[i]; i++) {
    // column
    c.style.borderRightWidth = ((i + 1) % b) != 0 ? "1px" : "0";
    // row
    c.style.borderBottomWidth = parseInt(i / b, 10) * b < e - b ? "1px" : "0";
}​
于 2012-12-12T03:05:59.343 に答える
-2

ここでは、jQuery を使用した私のソリューションを見つけることができます。http://jsfiddle.net/UZJmd/7/

必要なスパンの数を入力してから、必要な列の数を定義するだけです。他のすべては動的に定義されます。

​1- var spanWidth = parseInt($("span").css("width")); 
2- var spanSize = $("span").size();
3- var nColumns = 2;
4- var nLines = Math.floor(spanSize/nColumns+0.5);
5- 
6- $(function() {
7-     $("div").css({"width": (spanWidth*nColumns + 1*(nColumns-1))+"px"});
8-     for(var i = 0; i <= spanSize; i++) {
10-         if((i+1)%nColumns == 0) {
11-             $('span').eq(i).css({"border-right": 0});
13-         }
14-         if(Math.floor(i/nColumns) >= nLines-1) {
15-             $('span').eq(i).css({"border-bottom": 0});
16-         }
17-     }
18- });

3行目では、必要な列の数を定義します。10行目では、それが行の最後のスパンかどうかを確認し、右の境界線を 0 に設定します。14行目では、最後の行にいるかどうかを確認してから、下の境界線を 0 に設定します。

于 2012-12-10T00:08:18.213 に答える