为什么清楚:两者都不起作用?

时间:2015-03-31 18:32:42

标签: html css

我想将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

1 个答案:

答案 0 :(得分:3)

你可能遗漏了一些东西 - clear:both效果很好。

据我所知,其中带有“test”的<div>没有应用任何结算。我将HTML加载到新的网页中,将链接更改为CSS文件,并且可以看到上面的基本布局。

然后我使用了Chrome的“Inspect Element”功能来查看该元素。没有清算;当我使用开发者工具添加clear:both时,它会弹出如下所示。

:d

修改:附加屏幕截图screenshot shows Developer Tools in use