少数のCSSで多数の絶対divを配置するにはどうすればよいですか？

divを垂直方向に一定の回数（36回）繰り返す方法が必要です。それぞれの間に1pxのスペースがあります。 divは完全に配置されているため、個々にスタイルを設定するとCSSのトン数になります。少数のCSSで多数の絶対divを配置するにはどうすればよいですか？

36 divをHTMLに直接入れても構いませんが、私はそうしたくないと思っていますが、それぞれをスタイリングすると効率が悪くなります。

出典

2012-03-18 Ian

これは、純粋なHTML/CSSでは実行できません。 – MarcinJuraszek

これは手作業、JavaScript、またはPHPのようなサーバー側言語で行う必要があります。 – j08691

あなたは何を達成しようとしていますか？ divを繰り返すには、divを繰り返し生成するために、いくつかのjqueryまたはサーバーサイドコードが必要です。特に何かを達成しようとしているのであれば、よりよいアプローチをアドバイスすることができます – cusimar9

どのようにそれらを巣に入れますか？あなたは相対的な位置または多分いくつかの余裕をもって巣にそれらをすることができ

：http://jsfiddle.net/zWbUu/

HTML

div id="container"> 
    <div class="square"> 
     <div class="square"> 
      <div class="square"> 
       <div class="square"> 
        <div class="square"> 
         <div class="square"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：あなたは、いくつかのコンテンツは、それらをint型

#container { 
    position: absolute; 
    top: -21px; 
    left: 20px; 
} 
.square { 
    background-color: #666; 
    width: 20px; 
    height: 20px; 
    position: relative; 
    top: 21px; 
}

が必要な場合は、することができますネストされた絶対配置されたdivまたはこのトリックを使用してください：http://jsfiddle.net/zWbUu/1/

HTML：

<div id="container">1 (doesn't apear) 
    <div class="square">2 
     <div class="square">3 
      <div class="square">4 
       <div class="square">5 
        <div class="square">6 
         <div class="square">7</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

あなたは絶対位置に述べたように、それが外に取られるよう、あなたが目的の座標を定義しなければならないので、これは、絶対位置では不可能である

#container { 
    position: absolute; 
    top: -20px; 
    left: 20px; 
} 
.square { 
    background-color: #666; 
    width: 20px; 
    height: 20px; 
    line-height: 20px; 
    position: relative; 
    top: 1px; 
    color: #fff; 
    text-align: center; 
}

出典

2012-03-18 18:44:29 rcdmk

それは私には良く見えます。それは確かにCSSのトンを解決するが、それほど多くのマークアップなしでそれを行う方法を知っていますか？ 36 divタグはたくさんあります！ありがとう、Ian – Ian

HTMLとCSSだけでは、これはできません。しかし、あなたはそれらを作成するためにサーバー側の技術やjavascriptを使用することができます。私は個人的に最初にお勧めします。なぜなら、よりアクセスしやすいからです。 PHPの例については、DrAgonmorayの回答を参照してください。 – rcdmk

私はあなたの方法を試してみると思います。私はこれを行うために109の要素があることが嫌いです。私は船外に行くようです。 – Ian

純粋なHTMLやCSSを使用して他の人が言ったように、これを行うことはできません。 PHPでやりたければ、次のようなことができます：

divに「mydiv」というクラスがあると言ってください。このクラスはである必要があります。位置：絶対高さ：10ピクセル幅：10ピクセルボーダー半径：4ピクセルあなたの言ったように。それに加えて、1pxの余白を追加します。

あなたのCSSは次のようにちょっとになります。

.mydiv { 
    position:absolute; 
    height:10px; 
    width:10px; 
    border-radius:4px; 
    margin-top:1px; 
}

をあなたのdivの繰り返しを行うためには、あなたはそれがどこへ行きたいか、あなたのHTML内で、次のようないくつかのコードを置きます。

<?php 
for ($i = 1; $i <= 36; $i++) { 
    echo "<div class='mydiv'>your div</div>"; 
} 
?>

私が言ったように、これはPHPを使用しています。以前にPHPを使用したことがない人は、WebサーバがPHPをサポートしているかどうかを確認する必要があります。 HTML内でPHPを使用して上のビット詳細はこれを参照してください。

http://www.ntchosting.com/php/php-in-html.html

このコードはおそらく、完璧ではありませんが、私はあなたがそれで作業することができます確信しています。

出典

2012-03-18 18:44:00 fruitcup

私はPHPとJavascriptについて全く知識がありません。また、Google Sites（私が使用しているプログラム）がJavascriptやPHPを許可しないと確信しています。私は間違いなくあなたが言ったことを調べます。ありがとう！ – Ian

それはおそらくPHPを許可しませんが、私はそれがJavascriptを可能にすると確信しています。 JSの問題は、あなたのウェブサイトを閲覧している人がそれを有効にしていない場合、あなたがそれを見ることができないということです。（PHPはできませんが） – fruitcup

OK、私は[Jsfiddleで試してみました]（http://jsfiddle.net/kLusw/1/）、それはすべて私が繰り返ししようとしていたdivを削除することでした。これを[this one]（http://jsfiddle.net/LtK3v/1/）と比較してください。左側の緑は私が繰り返ししようとしていたものです。 – Ian

ドキュメントフロー。

しかし、これは浮動体で行うことができます。例えば、次のコードを取る：

<!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>Untitled Document</title> 
<style type="text/css"> 
    body{ 
     background-color:#000; 
     padding: 0; 
     margin: 0; 
    } 
    #holder{ 
     width:15px; 
     margin: 30px auto; 
     padding: 1px 1px 0 1px; 
      clear: both; 
    } 

    .box{ 
     width:10px; 
     height:10px; 
     margin-bottom: 1px; 
     background-color: #3F6; 
     float:left; 
    } 

</style> 
</head> 
<body> 
    <div id="holder"> 
     <div class="box"> 
     </div> 
     <div class="box"> 
     </div> 
     <div class="box"> 
     </div> 
     <div class="box"> 
     </div> 
     <div class="box"> 
     </div> 
     <div class="box"> 
     </div> 
    </div> 
</body> 
</html>

をあなたはそれを正確に位置決め値を与えることなく、前の1以下の改行に表示されるように、次のボックスのdivを強制2つのboxのdivの幅よりも小さいholderのdivを行うことで。次に、スペースを追加する余白を与えます。

出典

2012-03-18 18:47:11

大量のDIVタグを使って簡単に行うことができますが、それは109 DIVの総計を意味するため、すべてのコストを避けたいと思います！ – Ian

フロートはすでにブロックされており、後継者が落ちているので、ここではfloatを使う必要はないと思います。 – rcdmk

divでこれを実行できる唯一の方法は、現在のdivの画像を空白の1pxで作成することです。この方法で、固定幅/高さdivを作成し、その画像の背景が繰り返し設定されるようにすることができます。これはあなたが望む錯覚を1つだけdivと与えるでしょう。

それ以外の場合は、既に述べたように、必要な繰り返しを得るにはx量がdivsになります。これは簡単にjQueryなどを使用して実現できますが、実際には1つだけdivが必要な場合は、背景画像が表示されます。

出典

2012-03-18 19:31:53 Mig

申し訳ありませんが、ここで私は少し野心的ですね。 – Ian

少数のCSSで多数の絶対divを配置するにはどうすればよいですか？

答えて

関連する問題