2015-03-31 62 views
1

我想将div放在另一个下面,即文本测试应放置在地图下方。我怎样才能实现它?我想把内容放在地图下面,但它不会在正确的位置呈现。我想要包含文本文本的div在地图下方直接渲染,并且优先占用所有空闲空间。如何做到这一点?为什么很清楚:两者都不起作用?

enter image description here

<!DOCTYPE html> 
<html> 

    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <meta name="keywords" 
      content="Houses Apartments, Vacation homes, Offices, Land, Flatmates,Paying Guest, Other real estate, Cars, Motorcycles, Accessories parts, Trucks, Other vehicles, Home Garden, Clothing, For Kids (Toys Clothes), Jewelry Watches, Hobbies, Sports Bicycles, Movies, Books Magazines, Pets, Tickets, Art Collectibles, Music Instruments, Computers Accessories, TV, Audio, Video, Cameras, Cellphones gadgets, Video games consoles, Job offers, Resumes, Services, Classes, Professional,Office equipment, Other, "> 
    <meta name="description" 
      content="Find jobs, cars, houses, mobile phones and properties for sale in your region conveniently. Find the best deal among {{count}} free ads online!"> 

    <title>Free classifieds in India - Koolbusiness.com</title> 

    <link href="/static/css/koolindex_in.css?0.238133053892" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="/static/js/jquery-1.10.2.min.js?0.238133053892"></script> 
</head> 
<body> 

    <style xmlns="http://www.w3.org/2000/svg"> 
     #visualization path:hover { fill: #fcafff;stroke:'#FFFFFF';strokeWidth:155; } 
     #visualization rect:hover {fill:transparent;stroke:'#FFFFFF';strokeWidth:155;} 
     </style> 

    <script type='text/javascript' src='http://www.google.com/jsapi'></script> 
    <script type='text/javascript'> 


     function drawMap() { 
      /* 
    var data = google.visualization.arrayToDataTable([ 
     ['Country', 'Projects'], 
     ['Russia', 3], 
     ['France', 2], 
     ['Spain', 4] 
    ]);*/ 
      var data2 = google.visualization.arrayToDataTable([ 
     ['Country', 'Popularity'], 
     ['Goa', 200], 
     ['Gujarat', 300],['Andhra Pradesh', 200], 
['Arunachal Pradesh', 300],['Assam', 200], 
['Bihar', 300],['Chhattisgarh', 200], 
['Gujarat', 300],['Goa', 200], 
['Haryana', 300],['Himachal Pradesh', 200], 
['Jammu and Kashmir', 300],['Jharkhand', 200], 
['Karnataka', 300],['Kerala', 200], 
['Madhya Pradesh', 300],['Maharashtra', 200],['Manipur', 300],['Meghalaya', 200],['Mizoram', 300],['Nagaland', 200], 



























       ['Orissa', 300],['Punjab', 200], 
       ['Rajasthan', 300], 
       ['Sikkim', 200], 
       ['Tamil Nadu', 300], 
       ['Tripura', 200], 

         ['Uttaranchal', 300],['Uttar Pradesh', 200], 
       ['West Bengal', 300], 
       ['Delhi', 200], 
       ['Lakshadweep', 300], 
       ['Daman and Diu', 200], 

         ['Dadra and Nagar Haveli', 300],['Chandigarh', 200], 
       ['Pondicherry', 300], 
       ['Andaman and Nicobar Islands', 200] 

    ]); 
var data = google.visualization.arrayToDataTable([ 
      ['Province'], 
     ['Goa'], 
     ['Gujarat'], 

     ['Andhra Pradesh'], 
['Arunachal Pradesh'], 
['Assam'], 
['Bihar'], 
['Chhattisgarh'], 
['Goa'], 
['Gujarat'], 
['Haryana'], 
['Himachal Pradesh'], 
['Jammu and Kashmir'], 
['Jharkhand'], 
['Karnataka'], 
['Kerala'], 
['Madhya Pradesh'], 
['Maharashtra'], 
['Manipur'], 
['Meghalaya'], 
['Mizoram'], 
['Nagaland'], 
['Orissa'], 
['Punjab'], 
['Rajasthan'], 
['Sikkim'], 
['Tamil Nadu'], 
['Tripura'], 
['Uttaranchal'], 
['Uttar Pradesh'], 
['West Bengal'], 
['Delhi'], 
['Lakshadweep'], 
['Daman and Diu'], 
['Dadra and Nagar Haveli'], 
['Chandigarh'], 
['Pondicherry'], 
['Andaman and Nicobar Islands'] 



    ]); 



var options = { 
      region:'IN', 
      /*colorAxis: {colors: ['#00853f', 'black', '#e31b23']},*/ 
//colorAxis: {minValue: 0, maxValue: 0, colors: []}, 
      backgroundColor: '#81d4fa', 
      datalessRegionColor: '#ffc801', 
     width:450, 
     height:278, 
    resolution: 'provinces', 
     }; 
//options['colorAxis'] = { minValue : 0, maxValue : 1, colors : ['#FF0000','#0000FF']}; 
     options['colors'] = ['#ffc801', '#ffc801', '#ffc801', '#ffc801', '#ffc801', '#ffc801', '#ffc801', '#ffc801', '#ffc801', '#ffc801']; 
     options['legend'] = 'none'; 

      /* 
     var options = { dataMode: 'regions', 
     backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 }, 
     colorAxis: {minValue: 0, maxValue: 0, colors: []}, 
     legend: 'none', 
     datalessRegionColor: '#ffc801', 
     displayMode: 'regions', 
     enableRegionInteractivity: 'true', 
     resolution: 'provinces', 
     sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10}, 
     region:'IN', 
     keepAspectRatio: true, 
     width:450, 
     height:300, 
     tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false} 
     };*/ 
    var container = document.getElementById('mapcontainer'); 
    var chart = new google.visualization.GeoChart(container); 

    function myClickHandler(){ 
     var selection = chart.getSelection(); 
     var message = ''; 
     for (var i = 0; i < selection.length; i++) { 
      var item = selection[i]; 
      // if (item.row != null && item.column != null) { 
       message += '{row:' + item.row + ',column:' + item.column + '}'; 
      //} else 
      if (item.row != null) { 
       message += '{row:' + item.row + '}'; 
      //} else if (item.column != null) { 
       // message += '{column:' + item.column + '}'; 
      } 
     } 
     if (message == '') { 
      message = 'nothing'; 
     } 
     alert('You selected ' + message); 
     if (item.row==8) { 
      window.location = "/gujarat/"; 
     }if (item.row==9) { 
      window.location = "/haryana/"; 
     } 
     if (item.row==15) { 
      window.location = "/madhya_pradesh/"; 
     } 
     if (item.row==16) { 
      window.location = "/maharashtra/"; 
     } 
     if (item.row==22) { 
      window.location = "/punjab/"; 
     } 
      if (item.row==23) { 
      window.location = "/rajasthan/"; 
     } 
      if (item.row==28) { 
      window.location = "/uttar_pradesh/"; 
     } 
    } 

    google.visualization.events.addListener(chart, 'select', myClickHandler); 

    chart.draw(data, options); 
} 
google.load('visualization', '1', {packages: ['geochart'], callback: drawMap}); 






     /* 


     google.load('visualization', '1', {'packages': ['geochart']}); 

     google.setOnLoadCallback(drawVisualization); 

     function drawVisualization() {var data = new google.visualization.DataTable(); 

     data.addColumn('string', 'Country'); 
     data.addColumn('number', 'Value'); 
     data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array(); 

     var options = { 
     backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 }, 
     colorAxis: {minValue: 0, maxValue: 0, colors: []}, 
     legend: 'none', 
     datalessRegionColor: '#ffc801', 
     displayMode: 'regions', 
     enableRegionInteractivity: 'true', 
     resolution: 'provinces', 
     sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10}, 
     region:'IN', 
     keepAspectRatio: true, 
     width:450, 
     height:300, 
     tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false} 
     }; 
     var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
     google.visualization.events.addListener(chart, 'select', function() { 
     var selection = chart.getSelection(); 
     if (selection.length == 1) { 
     var selectedRow = selection[0].row; 
     var selectedRegion = data.getValue(selectedRow, 0); 
     if(ivalue[selectedRegion] != '') { document.location = ivalue[selectedRegion]; } 
     } 
     }); 
     chart.draw(data, options); 
    }*/ 
    </script> 

<div id="wrapper"> 

<!--[if lt IE 7]> 
<div class="alert-outer alert-error"> 
    <a href="#" class="alert-closer" title="close this alert" onclick="removeIeNotification(this); return false;">×</a> 

    <div class="alert-inner"> 
     <span><strong>You are using an outdated version of Internet Explorer.</strong> For a faster, safer browsing experience, upgrade today!</span> 

    </div> 
</div> 

<![endif]--> 

<div class="main"> 
<div class="column_left"> 
    <div class="box"> 

     <ul> 
      <li>KoolBusiness is easy, free, and kool.</li> 
      <li>Buy and sell <a href="/india/cars-for_sale">cars</a>, check our <a href="/india/real_estate">real 
       estate</a> 
       section, find <a href="/india/jobs">jobs</a>, and much more. 
      </li> 
      <li>Check our <strong><a href="/india">0 ads online</a></strong> and find what you are looking for 
       in 
       your region or in all India. 
      </li> 
     </ul> 


    </div> 

    <div id="regions"> 


     <div class="region_links_one"> 
      <ul class="regions_one"> 
       <li><a id="region_8" class="region" href="http://www.koolbusiness.com/andhra_pradesh/">Andhra 
        Pradesh</a></li> 
       <li><a id="region_9" class="region" href="http://www.koolbusiness.com/arunachal_pradesh/">Arunachal 
        Pradesh</a></li> 
       <li><a id="region_10" class="region" 
         href="http://www.koolbusiness.com/assam/">Assam</a> 
       </li> 
       <li><a id="region_11" class="region" 
         href="http://www.koolbusiness.com/bihar/">Bihar</a> 
       </li> 
       <li><a id="region_12" class="region" 
         href="http://www.koolbusiness.com/chhattisgarh/">Chhattisgarh</a></li> 
       <li><a id="region_13" class="region" 
         href="http://www.koolbusiness.com/goa/">Goa</a></li> 
       <li><a id="region_14" class="region" href="http://www.koolbusiness.com/gujarat/">Gujarat</a> 
       </li> 
       <li><a id="region_15" class="region" href="http://www.koolbusiness.com/haryana/">Haryana</a> 
       </li> 
       <li><a id="region_16" class="region" href="http://www.koolbusiness.com/himachal_pradesh/">Himachal 
        Pradesh</a></li> 
       <li><a id="region_17" class="region" href="http://www.koolbusiness.com/jammu_kashmir/">Jammu 
        &amp; 
        Kashmir</a></li> 
       <li><a id="region_18" class="region" href="http://www.koolbusiness.com/jharkhand/">Jharkhand</a> 
       </li> 
       <li><a id="region_19" class="region" href="http://www.koolbusiness.com/karnataka/">Karnataka</a> 
       </li> 
       <li><a id="region_20" class="region" href="http://www.koolbusiness.com/kerala/">Kerala</a> 
       </li> 
       <li><a id="region_21" class="region" href="http://www.koolbusiness.com/madhya_pradesh/">Madhya 
        Pradesh</a></li> 
      </ul> 
      <ul class="regions_two"> 
       <li><a id="region_22" class="region" 
         href="http://www.koolbusiness.com/maharashtra/">Maharashtra</a></li> 
       <li><a id="region_23" class="region" href="http://www.koolbusiness.com/manipur/">Manipur</a> 
       </li> 
       <li><a id="region_24" class="region" href="http://www.koolbusiness.com/meghalaya/">Meghalaya</a> 
       </li> 
       <li><a id="region_25" class="region" href="http://www.koolbusiness.com/mizoram/">Mizoram</a> 
       </li> 
       <li><a id="region_26" class="region" href="http://www.koolbusiness.com/nagaland/">Nagaland</a> 
       </li> 
       <li><a id="region_27" class="region" href="http://www.koolbusiness.com/orissa/">Orissa</a> 
       </li> 
       <li><a id="region_28" class="region" href="http://www.koolbusiness.com/punjab/">Punjab</a> 
       </li> 
       <li><a id="region_29" class="region" href="http://www.koolbusiness.com/rajasthan/">Rajasthan</a> 
       </li> 
       <li><a id="region_30" class="region" href="http://www.koolbusiness.com/sikkim/">Sikkim</a> 
       </li> 
       <li><a id="region_31" class="region" href="http://www.koolbusiness.com/tamil_nadu/">Tamil 
        Nadu</a></li> 
       <li><a id="region_32" class="region" href="http://www.koolbusiness.com/tripura/">Tripura</a> 
       </li> 
       <li><a id="region_34" class="region" 
         href="http://www.koolbusiness.com/uttaranchal/">Uttaranchal</a></li> 
       <li><a id="region_33" class="region" href="http://www.koolbusiness.com/uttar_pradesh/">Uttar 
        Pradesh</a></li> 
       <li><a id="region_35" class="region" href="http://www.koolbusiness.com/west_bengal/">West 
        Bengal</a></li> 
      </ul> 
     </div> 
     <div class="region_links_two"> 
      <!-- ads here --> 
      <h2>Union territories</h2> 


      <ul class="regions_one"> 
       <li><a class="region" href="http://www.koolbusiness.com/delhi/">Delhi</a></li> 
       <li><a class="region" href="http://www.koolbusiness.com/lakshadweep/">Lakshadweep</a></li> 
       <li><a class="region" href="http://www.koolbusiness.com/daman_diu/">Daman &amp; Diu</a> 
       </li> 
       <li><a class="region" href="http://www.koolbusiness.com/dadra_nagar_haveli/">Dadra &amp; Nagar 
        Haveli</a> 
       </li> 
      </ul> 
      <ul class="regions_two"> 
       <li><a class="region" href="http://www.koolbusiness.com/chandigarh/">Chandigarh</a></li> 
       <li><a class="region" href="http://www.koolbusiness.com/pondicherry/">Pondicherry</a></li> 
       <li><a class="region" href="http://www.koolbusiness.com/andaman_nicobar_islands/">Andaman &amp; 
        Nicobar 
        Islands</a></li> 
      </ul> 
     </div> 
    </div> 

</div> 
<div id="my_wrapper"> 
<div id="mapcontainer"> 

    <div id='visualization'></div> 

</div> 
<div> 
test 
</div> 
</div> 
<footer class="nohistory columns"> 

    <p class="first">A good deal is just around the corner!</p> 


    <p>KoolBusiness is the right choice for safe buying and selling in India: a free classifieds website where you 
     can buy and sell almost everything.</p> 


    <p><a href="/ai">Post an ad for free</a> or browse through our categories. You will find thousands of free 
     classifieds for cars, houses, mobile phones and gadgets, computers, pets and dozens of items and services in 
     your state or union territory.</p> 


    <p> 

     <strong>KoolBusiness does not charge any fee and does not require registration.</strong> Every 
     ad is checked so we can give you the highest quality possible for the ads on our site. That’s why 
     KoolBusiness is the most convenient, easiest to use and most complete free ads site in India.</p> 


    <div id="world_sites"> 





    </div> 




</footer> 

</div> 



</body> 
</html> 

的CSS可here

+4

什么是'/静态/ CSS/koolindex_in.css'? – JClaspill 2015-03-31 18:34:31

+1

你漂浮的元素? – 2015-03-31 18:35:38

回答

3

您可能错过了一些东西 - clear:both工程就好了。

其中“测试”的<div>没有清除适用,据我所知。我将你的HTML加载到一个新的网页,改变了链接到CSS文件,并可以看到你上面的基本布局。

然后我使用Chrome的“检查元素”功能来查看该元素。没有结算被应用;当我使用开发工具添加clear:both时,它按照您的要求弹出。

:d

编辑:附截图screenshot shows Developer Tools in use

+0

谢谢!我只是没有看到它出现在哪里。现在我想让它直接出现在地图右侧的地名下方。 – 2015-03-31 18:51:41

+1

一种选择是将名称浮动到左侧,然后将地图浮动到右侧。然后可以将该块设置为“clear:right”而不是“clear:both”。请记住,您可能需要将整个布局保存在本身已浮动的容器中(如果没有),那么如果您在此主布局外侧悬浮了侧栏,则您的div将低于此布局。 – 2015-03-31 18:55:32

+1

另一种选择是将mapcontainer和div换成一个浮动div,而不是浮动mapcontainer ... – 2015-03-31 18:57:26

相关问题