1

我正在使用一个名为 Columnizer 的 Jquery 插件来布局我的文本，它可以在 Firefox 上完美运行，但如果不创建新列并静态放置它们，它可能无法在 IE 上运行。

http://welcome.totheinter.net/columnizer-jquery-plugin/

使用 Firefox ，它会自动在列中排列元素

我们怎样才能让它也能在 IE 上运行呢？我真的很努力，只是没有工作

在此处输入图像描述

我的html

   <script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>

<script type="text/javascript">
$(function(){
    $('h1').addClass('dontend');
    $('.wide').columnize({
        width : 120,
        height : 400
    });
});
  </script>

   <script  style="display:none" type="text/javascript">var Mint=new Object();Mint.save=function()
  {var now=new Date();var debug=false;if(window.location.hash=='#Mint:Debug'){debug=true;};var path='http://welcome.totheinter.net/mint/?record&key=6a56784248357a3735323031363633316663796c526d';path=path.replace(/^https?:/,window.location.protocol);for(var developer in this)
  {for(var plugin in this[developer])
  {if(this[developer][plugin]&&this[developer][plugin].onsave)
  {path+=this[developer][plugin].onsave();};};};path+='&'+now.getTime();if(debug){window.open(path+'&debug&errors','MintLiveDebug'+now.getTime());return;};var ie=/*@cc_on!@*/0;if(!ie&&document.getElementsByTagName&&(document.createElementNS||document.createElement))
  {var tag=(document.createElementNS)?document.createElementNS('http://www.w3.org/1999/xhtml','script'):document.createElement('script');tag.type='text/javascript';tag.src=path+'&serve_js';document.getElementsByTagName('head')[0].appendChild(tag);}
  else if(document.write)
  {document.write('<'+'script type="text/javascript" src="'+path+'&amp;serve_js"><'+'/script>');};};if(!Mint.SI){Mint.SI=new Object();}
  Mint.SI.Referrer={onsave:function()
  {var encoded=0;if(typeof Mint_SI_DocumentTitle=='undefined'){Mint_SI_DocumentTitle=document.title;}
  else{encoded=1;};var referer=(window.decodeURI)?window.decodeURI(document.referrer):document.referrer;var resource=(window.decodeURI)?window.decodeURI(document.URL):document.URL;return '&referer='+escape(referer)+'&resource='+escape(resource)+'&resource_title='+escape(Mint_SI_DocumentTitle)+'&resource_title_encoded='+encoded;}};Mint.save();</script> 






  <meta charset="utf-8" />
  <link rel="stylesheet" href="f.css">



  <div class="container"> <div class="wide">


      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>
      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>
      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>
      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>
      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>
      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>


  </div></div>

我的 CSS

  .container {
      background-color: #;
      height: 300px;
      width: 700px;

  }
  .block {
      width: 100px;
      height:150px;
      background-color: #;
      margin: 10px;
      margin-top: 5px;
  }
4

2 回答 2

1

删除<div class="block">并仅将纯文本保留在wide课堂内。这应该可以工作，columnizer 插件将自动为每个块添加类。

例如：

<div class="container"> 
  <div class="wide">
     <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
     <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
  </div>
</div>

Columnnizer 会自动将文本分成不同的列。如下图所示

<div class="wide" style="width: 2700px;">
  <div class="first column" style="width: 300px; float: left;">
  <div class="column" style="width: 300px; float: left;">
  <div class="column" style="width: 300px; float: left;">
</div>

新代码（将此代码粘贴到文本编辑器上并将其保存为 HTML 页面并检查 IE8 和 IE7 上的 HTML 页面）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<head>
 <style>
.column *{ padding: 5px; }
</style> 
   <script type = "text/javascript" src ="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>
        <script type="text/javascript">
        $(function(){
            $('h1').addClass('dontend');
            $('.wide').columnize({
                width : 300,
                height : 200
            });
        });
        </script>

</head>
<body>
  <div id="wrapper"> 
    <div class="wide">
    <h1>Lorem ipsum ne justo</h1>
 <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello HelloHello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello   hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
     <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
     <p>Hello  hello HellHello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello o  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
     <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  heHello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello llo Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
      <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
     <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
    </div>
  </div>
 </body> 
 </html>
于 2013-04-22T05:39:25.087 回答
0

我不明白为什么会这样，但它在 IE8 上对我有用：打开浏览器的控制台就可以了。

为此，请加载页面，单击 F12（打开开发人员工具），单击脚本选项卡，然后单击控制台选项卡。

重新加载页面：它有效。您现在可以关闭开发人员工具窗口，所有后续加载也将正常工作。

于 2014-04-10T09:32:40.680 回答