2011-09-26 8 views
9

यहां बहादुर के लिए एक मस्तिष्क-टीज़र है। मैं दिनों के लिए इस पर रहा हूं और बस समाधान के साथ नहीं आ सकता। एचटीएमएल, सीएसएस और php केवल का उपयोग करनाटेबल (एचटीएमएल) के साथ एक बाइनरी पेड़ का प्रतिनिधित्व कैसे करें?

enter image description here

:

मैं कुछ इस तरह से बाहर आने के लिए करना चाहता था।

मैं पास गया, लेकिन मुझे काफी उम्मीद नहीं थी। Here is the code in PHP और here is the output

<table border="0"> 
<thead> 
    <tr> 
     <th>Cientoveintiochavos</th> 
     <th>Seseintaicuatravos</th> 
     <th>Treintaidosavos</th> 
     <th>Dieciseisavos</th> 
     <th>Octavos</th> 
     <th>Cuartos</th> 
     <th>Semifinales</th> 
     <th>Final</th> 
    </tr> 
</thead> 
<tbody> 
<?php for($i=0;$i<256;$i++): ?> 
    <tr> 
     <?php for($n=0,$c=2;$n<8;$n++,$c*=2): ?> 
      <?php 
      /* 
      if(false){//$i == 0) { 
       $rwspn = $c/2+1; 
       $iter = 0; 
      } else { 
       $rwspn = $c; 
       $iter = $c;//-$c/2+1; 
      } 
      */ 
      $class = ($i%($c*2))?'par':'impar winner'; 
      if($i%$c==0):?> 
       <td rowspan="<?=$c;?>" class="<?=$class;?>"><span><?php echo genRandomString();?></span></td> 
      <?php endif; ?> 
     <?php endfor; ?> 
    </tr> 
<?php endfor; ?> 
</tbody> 
</table> 

कोई जानता है एक द्विआधारी पेड़ या एक dendrogram का प्रतिनिधित्व करने के लिए कैसे या एक होशियार कोड के साथ आता है तो कृपया मुझे बताएँ!

उत्तर

3

मैंने divs kinda जैसे @HugoDelsing का उपयोग करके ऐसा कुछ किया है।

  1. पहले खिलाड़ी (सीमा-नीचे)
  2. 1 और 2 खिलाड़ियों (बॉर्डर-दायां)
  3. के बीच एक स्पेसर: जिस तरह से मैं लाइनों संभाला 4 खड़ी-खड़ी divs में प्रत्येक जोड़ी विभाजित करने के लिए था दूसरे खिलाड़ी (सीमा-नीचे और सीमा-दाएं)
  4. अगले जोड़ी से पहले एक स्पेसर (कोई सीमाओं)

इनमें से प्रत्येक हो जाता है 1/4 जोड़ी * की ऊंचाई, और की कुल ऊंचाई जब आप दाईं ओर जाते हैं तो एक जोड़ी दोगुनी हो जाती है। यदि आपके पास दो की शक्ति नहीं है, तो प्लेसहोल्डर्स के साथ स्लॉट भरें ताकि सबकुछ सही मात्रा में हो।

* निचले बॉर्डर 1 से ऊंचाइयों फेंक देगा, इसलिए ले कि खाते में जब अपनी पंक्तियों को स्टाइल।

अन्य नोट
स्पेसर divs आवश्यक नहीं हो सकता, लेकिन मेरे लिए वे आसानी से रिक्ति संभाला और विभिन्न स्तंभों हो रही सही ढंग से पंक्तिबद्ध करने के लिए।

मैं PHP से भरे हुए ऊंचाइयों के लिए इनलाइन शैलियों का इस्तेमाल किया है, इसलिए मैं नहीं था एक मनमाना गहराई सीमा या गणना सीएसएस में हार्ड-कोडेड।

<style type="text/css"> 
    .round{ 
     float:left; 
     width:200px; 
    } 
    .firstTeam, .secondTeam{ 
     border-bottom:1px solid #ccc; 
     position:relative; 
    } 
    .firstSpacer, .secondTeam{ 
     border-right:1px solid #ccc; 
    } 
    .team{ 
     position:absolute; 
     bottom: 4px; 
     left: 8px; 
    } 
</style> 
<div class="round"> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:29px;"><div class="team">Team One</div></div> 
     <div class="firstSpacer" style="height:30px;">&nbsp;</div> 
     <div class="secondTeam" style="height:29px;"><div class="team">Team Two</div></div> 
     <div class="secondSpacer" style="height:30px;">&nbsp;</div> 
    </div> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:29px;"><div class="team">Team Three</div></div> 
     <div class="firstSpacer" style="height:30px;">&nbsp;</div> 
     <div class="secondTeam" style="height:29px;"><div class="team">Team Four</div></div> 
     <div class="secondSpacer" style="height:30px;">&nbsp;</div> 
    </div> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:29px;"><div class="team">Team Five</div></div> 
     <div class="firstSpacer" style="height:30px;">&nbsp;</div> 
     <div class="secondTeam" style="height:29px;"><div class="team">Team Six</div></div> 
     <div class="secondSpacer" style="height:30px;">&nbsp;</div> 
    </div> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:29px;"><div class="team">Team Seven</div></div> 
     <div class="firstSpacer" style="height:30px;">&nbsp;</div> 
     <div class="secondTeam" style="height:29px;"><div class="team">Team Eight</div></div> 
     <div class="secondSpacer" style="height:30px;">&nbsp;</div> 
    </div> 
</div> 
<div class="round"> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:59px;"><div class="team">Team One</div></div> 
     <div class="firstSpacer" style="height:60px;">&nbsp;</div> 
     <div class="secondTeam" style="height:59px;"><div class="team">Team Three</div></div> 
     <div class="secondSpacer" style="height:60px;">&nbsp;</div> 
    </div> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:59px;"><div class="team">Team Five</div></div> 
     <div class="firstSpacer" style="height:60px;">&nbsp;</div> 
     <div class="secondTeam" style="height:59px;"><div class="team">Team Eight</div></div> 
     <div class="secondSpacer" style="height:60px;">&nbsp;</div> 
    </div> 
</div> 
<div class="round"> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:119px;">&nbsp;</div> 
     <div class="firstSpacer" style="height:120px;">&nbsp;</div> 
     <div class="secondTeam" style="height:119px;">&nbsp;</div> 
     <div class="secondSpacer" style="height:120px;">&nbsp;</div> 
    </div> 
</div> 
<div class="round"> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:239px;">&nbsp;</div> 
    </div> 
</div> 
+0

क्या आप आसान विज़ुअलाइजेशन के लिए कोड या जेएसफ़िल्ड का उदाहरण पेस्ट कर सकते हैं? देखता है कि मैं क्या देख रहा था, धन्यवाद –

+0

@ नाओइसगोल्डन: उदाहरण कोड जोड़ा गया। – grossvogel

0

मैं एक टेबल का उपयोग नहीं करता लेकिन divs।

  • प्रत्येक कॉल के लिए एक निश्चित चौड़ाई (उदाहरण: 200 पीएक्स) के साथ सापेक्ष/पूर्ण स्थिति के साथ एक स्तंभ कंटेनर div बनाते हैं।
  • प्रत्येक स्तंभ कंटेनर की ऊंचाई और डबल पिछले कॉलम कंटेनर
  • की lineheight के साथ आंतरिक divs एक लंबे काले खड़ी रेखा छवि (लंबाई कम से कम आधा किसी भी स्तंभ में भीतरी divs में से सबसे बड़ी ऊंचाई के आकार बनाने की है। शुरू बाईं ओर विस्तृत 200px की एक क्षैतिज रेखा के साथ लाइन (ताकि 180degrees साथ एक एल बारी बारी से)। के बारे में आधे छवि में क्षैतिज रेखा से ऊपर मुक्त अंतरिक्ष के पाठ ऊंचाई छोड़ दो, तो लाइन पाठ के तहत किया जाएगा।
  • सेट प्रत्येक स्तंभ कंटेनर और बाईं केंद्र में यह स्थिति के भीतरी div करने के लिए पृष्ठभूमि के रूप में इस छवि; दोहराने = कोई नहीं;

कुछ नमूना कोड (छवियों के बिना)

<style type="text/css"> 
div.col { position:absolute;border:1px solid #f00;width:200px;top:0px; } 
div.col1 { left:0px; } 
div.col1 div { height:20px; line-height:20px; } 
div.col2 { left:200px; } 
div.col2 div { height:40px; line-height:40px; } 
div.col3 { left:400px; } 
div.col3 div { height:80px; line-height:80px; } 
div.col4 { left:600px; } 
div.col4 div { height:160px; line-height:160px; } 
div.col5 { left:800px; } 
div.col5 div { height:320px; line-height:320px; } 
</style> 


<div class='col1 col'> 
    <div>player1</div> 
    <div>player2</div> 
    <div>player3</div> 
    <div>player4</div> 
    <div>player5</div> 
    <div>player6</div> 
    <div>player7</div> 
    <div>player8</div> 
    <div>player9</div> 
    <div>player10</div> 
    <div>player11</div> 
    <div>player12</div> 
    <div>player13</div> 
    <div>player14</div> 
    <div>player15</div> 
    <div>player16</div> 
</div> 
<div class='col2 col'> 
    <div>player1</div> 
    <div>player3</div> 
    <div>player5</div> 
    <div>player7</div> 
    <div>player9</div> 
    <div>player11</div> 
    <div>player13</div> 
    <div>player15</div> 
</div> 
<div class='col3 col'> 
    <div>player1</div> 
    <div>player5</div> 
    <div>player9</div> 
    <div>player13</div> 
</div> 
<div class='col4 col'> 
    <div>player1</div> 
    <div>player9</div> 
</div> 
<div class='col5 col'> 
    <div>player1</div> 
</div> 
+0

दिलचस्प दृष्टिकोण:

Here's an example.

संपादित
ठीक है, यहाँ तेह codez है। मैंने एक पहेली [यहां] (http://jsfiddle.net/naoise/ez5N2/) किया है लेकिन फिर भी यह नहीं देख सकता कि छवि में जैसी लाइनों का प्रबंधन कैसे करें। –

0

ऐसा लगता है कि आप लगभग वहां हैं। अच्छा काम! मुझे लगता है कि केंद्र संरेखण जो आप चाहते हैं वह सीएसएस

td { 
    vertical-align: middle; 
} 

मुझे नहीं लगता कि आप सीमाओं का उपयोग करके काम करने के लिए लाइनें प्राप्त कर सकते हैं। आप इसके बजाय उनके लिए पृष्ठभूमि छवि आज़मा सकते हैं।

+0

यह सही है, लाइनें काम नहीं करेगी, इसलिए समाधान नहीं है (♫ niau niau niau, अगली बार बेहतर भाग्य! ♫) वास्तव में आंखों की तुलना में इसके लिए और भी कुछ है। मेरे पास प्रतिनिधित्व और सूत्र के साथ कुछ कागजात हैं, जो एक अच्छा अनुमान लगाते हैं, लेकिन कुछ गुम है और इस समय इसके साथ जारी नहीं रह सकता है। शायद एक और अधिक सरल अनुमान है। –

संबंधित मुद्दे