增加字體大小與JavaScript的周圍固定在CSS列

我正在尋找一個HTML頁面，在那裏我可以獲取文本的字體大小的div來使用JavaScript來增加浮動圖像，並在同一時間的圖像放置在當文本大小增加時，div不應該改爲div。下面我粘貼示例HTML頁面與文本的div和圖像的div與JavaScript來增加字體大小。當我們點擊更改字體大小按鈕時，它將增加字體大小，同時位於該div內的圖像將從其初始位置移位。但是我應該把這個圖像放在相同的位置，不管文本大小如何增加，如果文本已經溢出，它應該轉到下一列。請幫我克服這個困難。增加字體大小與JavaScript的周圍固定在CSS列

<html> 
<head> 

<style type="text/css"> 
<!-- 

div#multicolumn4 { 
    -moz-column-width: 150px; 
    -moz-column-gap: 20px; 
    -webkit-column-width: 250px; 
    -webkit-column-gap: 20px; 
    column-width: 150px; 
    column-gap: 20px; 
    height: 900px; 
} 


--> 
</style> 

<script> 
    function changeFontSize(size) 
    { 
    debugger; 
    var elms = document.getElementsByTagName("span"); 
    for(var i = 0;i < elms.length;i++) 
    { 
    var elmsHtml = elms[i].innerHTML; 
    var widthFactor = parseInt(elms[i].style.fontSize); 
    var FontSize = 0; 
    var ln = elmsHtml.length; 
    FontSize = Math.ceil(widthFactor +size); 
    elms[i].style.fontSize = FontSize; 
    } 
    } 
    function setFontSize(FontSize) 
    { 
    var elms = document.getElementsByTagName("span"); 
    for(var i = 0;i < elms.length;i++) 
    { 
    elms[i].style.fontSize = FontSize; 
    } 
    } 
</script> 
</head> 

<body> 
    <div> 


<div id="multicolumn4" > 
<span style='font-size:10px;'> 
<h1>The header of the columns</h1> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p> 
</span> 
<div><img id="Image-Maps_5201006280459541" src="images/im1.png" usemap="#Image-Maps_5201006280459541" border="0" width="192" height="256" alt="" /> 
<span style='font-size:10px;'> 
<p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p> 

<p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p> 

<p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p> 

<p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p> 


</span> 
     <p><button onclick="changeFontSize(1.0)">Change font size (+)</button></p> 
     <p><button onclick="changeFontSize(-1.0)">Change font size (-)</button></p> 
</div> 
</div> 
</body> 
</html>

來源

2011-03-23 Krishna

這種類型的佈局問題一直asked before好幾次:-)

從該線程上鍊接的快速閱讀，它看起來是不容易做到的。

編輯：權，這其中有被竊聽我。我認爲有可能用少量 非常大的數量複雜的JavaScript/jQuery和約making a demo。

還有一些工作要做，因爲包含圖像的 <p>已被留下不好的方式（即充滿 <span>元素）。我對這個解決方案的性能也沒有任何承諾。它似乎對我很好。哦，並且 Font +鏈接也只能工作一次，因爲它增加文本的字體的實際大小是固定的。

這就是說，我真的會嘗試尋找替代解決方案來解決您的問題，甚至問您爲什麼需要以這種方式修復圖像位置。它違背了正常的瀏覽器重新流動和規則。

編輯：Improved demo解決了評論中的問題。

編輯2：哇，我不知道CSS3列布局對瀏覽器來說有多複雜！計算高度是爲了使列或多或少相等，這意味着當我拆開<img>時，高度被調整。如果刪除了font-size並且<img>是而不是，則此調整的高度將不同。在<img>被刪除和添加之前，無法確定結果的高度。

也就是說，我已經使它在一個主要條件下工作 - 列具有硬編碼的高度。我試圖使它與瀏覽器計算的高度一致（正常流量規則會指示），但我認爲如果沒有更多的工作，這可能會非常困難。我認爲這可能奏效的唯一方法是每次移動<img>元素轉發一個<span>（即單詞），直到達到正確的position().top。但是這會非常低效，並且可能會使渲染速度變慢，從而導致無法使用。

所以，這裏是my final demo這是在Chrome 11中爲我工作。抱歉，我無法達到具有可變高度的完整解決方案，但是由於我和其他人說，它確實打破了所有瀏覽器佈局規則！

編輯3：當我說「最終」演示時，我顯然不是這個意思。我接受你的挑戰，實際上使這個工作正常與多個圖像和我真的希望這一次，我已經明白了。請看看這個new demo（適用於我的Chrome12），它與您發佈的HTML一起工作。我必須承認你發佈的JavaScript非常複雜。所以我重新考慮了一切，以基於我原來的JavaScript來處理多個圖像。

編輯4：現在不少編輯＆hellip;但我發現了這個錯誤。對於每種字體遞增或遞減，圖像在流中移動，並且可能添加margin-top以將圖像移回到其原始位置。但在重新計算後續字體大小更改的位置之前，我沒有清除此CSS。加入

的鍵控代碼是：

// clear any existing marginTop added on the images 
images.each(function() { 
    $(this).css('marginTop', 0); 
});

我還收拾了JavaScript的多一點，而我在那裏並固定另一個bug與除去<span>元件:-)

Updated jsFiddle demo

以防萬一jsFiddle不見了，下面是完整的解決方案作爲一個HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Test</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
     $(function(){ 
      var fontSize = 15; 

      // cannot store img.position().top or .left here because it is 
      // before the browser has re-flowed the columns, therefore the 
      // positions will be incorrect 
      var imageTops = new Array; 
      var imageLefts = new Array; 

      $('#fontUp').click(function() { 
       reflow(1); 
      }); 

      $('#fontDown').click(function() { 
       reflow(-1); 
      }); 

      function reflow(fontSizeStep) { 
       storeImagePositions(); 
       var fontLimitReached = changeFont(fontSizeStep); 
       if (!fontLimitReached) { 
        moveImages(); 
       } 
       return false; 
      } 

      function changeFont(step) { 
       fontSize += step; 

       var fontSizeLimitReached = true; 

       if (fontSize > 30) { 
        fontSize = 30; 
       } else if (fontSize < 15) { 
        fontSize = 15; 
       } else { 
        fontSizeLimitReached = false; 
       } 

       if (!fontSizeLimitReached) { 
        $('p').css({fontSize: fontSize + 'px'}); 
       } 

       return fontSizeLimitReached; 
      } 

      // initialize store of img top and left positions 
      function storeImagePositions() { 
       if (imageTops.length == 0) { // only do it once 
        $('img').each(function() { 
         var imgPosition = $(this).position(); 

         imageTops.push(imgPosition.top); 
         imageLefts.push(imgPosition.left); 
        }); 
       } 
      } 

      function moveImages() { 
       // bye bye images 
       var images = $('img').detach(); 

       // clear any existing marginTop added on the images 
       images.each(function() { 
        $(this).css('marginTop', 0); 
       }); 


       // spanify paragraphs 
       $('#column > p').each(function() { 
        $(this).html('<span>' + $(this).html().replace(/\s\s+/g).replace(/(\s)/g,'</span>$1<span>') + '</span>'); 
       }); 

       var imageIndex = 0; 

       // iterate words, working out where we can move the img to in the flow and if 
       // we find a match, increment the index so that as we continue the each() 
       // the next image is evaluated for replacement 
       $('#column > p span').each(function() { 
        var wordPosition = $(this).position(); 
        var wordLeft = wordPosition.left; 

        if (wordLeft >= imageLefts[imageIndex]) { 
         var wordBottom = wordPosition.top + $(this).height(); 

         if (wordBottom > imageTops[imageIndex]) { 
          $(this).before(images[imageIndex]); // move img before this word 
          var newImgTop = $(images[imageIndex]).position().top; 
          $(images[imageIndex]).css({marginTop: imageTops[imageIndex] - newImgTop + 'px'}); 
          imageIndex++; // increment index so remainder spans are being evaluated against the next image 
         } 
        } 
       }); 

       // reverse the "spanification" 
       $('#column > p').each(function() { 
        $(this).html($(this).html().replace(/<\\?span>/g, '').trim()); 
       }); 
      } 
     }); 
    //]]> 
    </script> 
    <style type="text/css"> 
    div#column { 
     -moz-column-count:6; 
     -webkit-column-count:3; 
     column-count:3; 
     -webkit-column-width:100px; 
     -moz-column-width:100px; 
     column-width:100px; 
     height:500px; 
    } 

    p { 
     margin:0; 
     clear:left; 
     font-size:15px; 
     text-align:justify; 
    } 

    img { 
     float:left; 
    } 
    </style> 
</head> 
<body> 
    <div><a href="#" id="fontUp" style="margin-right:10px">Font +</a><a href="#" id="fontDown">Font -</a></div> 
    <div id="column"> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <img src="http://www.avatarblast.com/avatars/cool/yoda.jpg" title="yoda" alt="yoda"/>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     <p>The change of name from <img src="http://www.avatarblast.com/avatars/cool/yoda.jpg" title="yoda" alt="yoda"/> LiveScript to JavaScript roughly coincided with Netscape adding support for Java technology in its Netscape Navigator web browser. The final choice of name caused confusion, giving the impression that the language was a spin-off of the Java programming language, and the choice has been characterized by many as a marketing ploy by Netscape to give JavaScript the cachet of what was then the hot new web-programming language. It has also been claimed that the language's name is the result of a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime with their then-dominant browser. Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p> 
     <p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p> 
     <p>Java EE includes several API specifications, such as JDBC, RMI, e-mail, JMS, web services, XML, etc., and defines how to coordinate them. Java EE also features some specifications unique to Java EE for components. These include Enterprise JavaBeans, Connectors, servlets, portlets (following the Java Portlet specification), JavaServer Pages and several web service technologies.<img src="http://www.avatarblast.com/avatars/cool/yoda.jpg" title="yoda" alt="yoda"/> This allows developers to create enterprise applications that are portable and scalable, and that integrate with legacy technologies. A Java EE application server can handle transactions, security, scalability, concurrency and management of the components that are deployed to it, in order to enable developers to concentrate more on the business logic of the components rather than on infrastructure and integration tasks.</p> 
     <p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 136 million, it is the world's most populous island, and one of the most densely populated regions in the world. It is home to 60% of Indonesia's population. The Indonesian capital city, Jakarta, is in west Java. Much of Indonesian history took place on Java; it was the centre of powerful Hindu-Buddhist empires, Islamic sultanates, the core of the colonial Dutch East Indies, and was at the centre of Indonesia's campaign for independence. The island dominates Indonesian social, political and economic life.</p> 
    </div> 
</body> 
</html>

來源

2011-03-23 15:12:54 andyb

感謝andyb ..感謝您的努力。我想要獲得的是，我有一個HTML頁面可以在iPad上顯示，當用戶放大文本大小時，文本內的圖像應放置在固定的位置，同時文本應該繞過圖像而不會影響圖像。 – Krishna 2011-03-24 07:56:37

樂意幫忙:-)我玩得很開心，一起玩！演示是否爲您解決了問題？我認爲它符合你在Windows上使用Chrome11時的描述。您一定需要使代碼模式通用以滿足您的需求，因爲它目前僅適用於一個圖像。 – andyb 2011-03-24 08:34:53

+1整潔的解決方案@andyb – 2011-03-24 10:02:33

如果你添加一個樣式屬性包含將它定位absolute，可能會解決你的問題的圖像div。

HTML片段：

<div> 
    <div id="multicolumn4" > 
     <span style='font-size:10px;'> 
      <h1>The header of the columns</h1> 
      <div class="imagediv"> 
       <img id="Image-Maps_5201006280459541" src="images/im1.png" usemap="#Image-Maps_5201006280459541" border="0" width="192" height="256" alt="" /> 
      </div> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p> 
      <p>Nam ut sapien sed pede pulvin</p> 
     </span> 
    </div> 
</div>

CSS：

.imagediv{float:left; margin-top: 30px; padding: 3px; }

這是你在找什麼？

，使文字四處圖像的方式是通過設置圖像上的樣式屬性「浮動」，或周圍的元件，如div。

如果您看到圖像位置發生變化，因爲文字大小高於圖像增加，那只是因爲這就是HTML的工作方式。

在HTML中的位置對於確定在渲染的網頁上顯示元素的位置很重要。

隨着你給的信息，目前尚不清楚它應該足夠怎樣的。我提供的代碼讓文字圍繞圖像然而文本高於div或至少image標籤將導致它被推下。

雖然有一種可能性可以讓你做這樣的事情，但它超出了我的技能，那就是用Javascript去除圖像，並將它插回到HTML中更高的位置。

我希望我給你足夠的信息讓你思考的解決方案。

來源

2011-03-23 13:22:50

感謝的Uw概念圖片...但我已經嘗試過這個問題，通過應用這種風格還將從其位置的圖像變化的時候，文字大小增加。唯一的CSS位置屬性 - '固定'將使它保持在相同的位置，但是然後圖像浮在文本上方。當文字大小增加時，我需要將圖像放在文字內，並且文字應在圖像周圍流動。 – Krishna 2011-03-23 13:30:05

我把它放在主div。 – Krishna 2011-03-23 13:34:49

我編輯了我的HTML和CSS。你能否看到這是你的願望？ – 2011-03-23 13:39:37

更新的HTML針對跨越多個列

<html> 
    <head> 
    <title>Test</title> 
    <g:javascript src="jquery.js"/> 
    <script type="text/javascript"> 
      $(function(){ 
      var fontSize = 16; 

      // cannot store img.position().top or .left here because it is 
      // before the browser has re-flowed the columns, therefore the 
      // positions will be incorrect 
      var imageTops = new Array; 
      var imageLefts = new Array; 

      $('#fontUp').click(function() { 
       reflow(1); 
      }); 

      $('#fontDown').click(function() { 
       reflow(-1); 
      }); 

      function reflow(fontSizeStep) { 
       storeImagePositions(); 
       var fontLimitReached = changeFont(fontSizeStep); 
       if (!fontLimitReached) { 
     //   moveImages(); 
       } 
       return false; 
      } 

      function changeFont(step) { 
       fontSize += step; 

       var fontSizeLimitReached = true; 

       if (fontSize > 30) { 
        fontSize = 30; 
       } else if (fontSize < 16) { 
        fontSize = 16; 
       } else { 
        fontSizeLimitReached = false; 
       } 

       if (!fontSizeLimitReached) { 
      //  alert(fontSize) 
        $('p').css({fontSize: fontSize + 'px'}); 
       } 

       return fontSizeLimitReached; 
      } 

      // initialize store of img top and left positions 
      function storeImagePositions() { 
       if (imageTops.length == 0) { // only do it once 
        $('img').each(function() { 
         var imgPosition = $(this).position(); 

         imageTops.push(imgPosition.top); 
         imageLefts.push(imgPosition.left); 
        }); 
       } 
      } 

      function moveImages() { 
       // bye bye images 
       var images = $('img').detach(); 

       // clear any existing marginTop added on the images 
       images.each(function() { 
        $(this).css('marginTop', 0); 
       }); 


       // spanify paragraphs 
       $('#column > p').each(function() { 
        $(this).html('<span>' + $(this).html().replace(/\s\s+/g).replace(/(\s)/g,'</span>$1<span>') + '</span>'); 
       }); 

       var imageIndex = 0; 

       // iterate words, working out where we can move the img to in the flow and if 
       // we find a match, increment the index so that as we continue the each() 
       // the next image is evaluated for replacement 
       $('#column > p span').each(function() { 
        var wordPosition = $(this).position(); 
        var wordLeft = wordPosition.left; 

        if (wordLeft >= imageLefts[imageIndex]) { 
         var wordBottom = wordPosition.top + $(this).height(); 

         if (wordBottom > imageTops[imageIndex]) { 
          $(this).before(images[imageIndex]); // move img before this word 
          var newImgTop = $(images[imageIndex]).position().top; 
          $(images[imageIndex]).css({marginTop: imageTops[imageIndex] - newImgTop + 'px'}); 
          imageIndex++; // increment index so remainder spans are being evaluated against the next image 
         } 
        } 
       }); 

       // reverse the "spanification" 
       $('#column > p').each(function() { 
        $(this).html($(this).html().replace(/<\\?span>/g, '').trim()); 
       }); 
      } 
     }); 
    //]]> 
    </script> 
    <style type="text/css"> 
     div#column { 
     margin-left:20px; 
     -moz-column-width: 250px; 
     -moz-column-gap: 20px; 
     -webkit-column-width: 250px; 
     -webkit-column-gap: 20px; 
     height: 850px; 
     } 

     p { 
     margin:0; 
     clear:left; 
     font-size:16px; 
     text-align:justify; 
     } 

     img { 
     float:left; 
     margin-top: 2px; 
     margin-right: 10px; 
     position:fixed; 
     } 
    </style> 
    </head> 
    <body> 
    <div><a href="#" id="fontUp" style="margin-right:10px">Font +</a><a href="#" id="fontDown">Font -</a></div> 
    <div><img src="${createLinkTo(dir:'images',file:'Winter.jpg')}" height="250" width="660" id="image" title="yoda" alt="yoda"/></div> 
      <div id="column" style="margin-top: 255px;"> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
      <p>The change of name from LiveScript to JavaScript roughly coincided with Netscape adding support for Java technology in its Netscape Navigator web browser. The final choice of name caused confusion, giving the impression that the language was a spin-off of the Java programming language, and the choice has been characterized by many as a marketing ploy by Netscape to give JavaScript the cachet of what was then the hot new web-programming language. It has also been claimed that the language's name is the result of a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime with their then-dominant browser. Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p> 
      <p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p> 
      <p>Java EE includes several API specifications, such as JDBC, RMI, e-mail, JMS, web services, XML, etc., and defines how to coordinate them. Java EE also features some specifications unique to Java EE for components. These include Enterprise JavaBeans, Connectors, servlets, portlets (following the Java Portlet specification), JavaServer Pages and several web service technologies. This allows developers to create enterprise applications that are portable and scalable, and that integrate with legacy technologies. A Java EE application server can handle transactions, security, scalability, concurrency and management of the components that are deployed to it, in order to enable developers to concentrate more on the business logic of the components rather than on infrastructure and integration tasks.</p> 
      <p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 136 million, it is the world's most populous island, and one of the most densely populated regions in the world. It is home to 60% of Indonesia's population. The Indonesian capital city, Jakarta, is in west Java. Much of Indonesian history took place on Java; it was the centre of powerful Hindu-Buddhist empires, Islamic sultanates, the core of the colonial Dutch East Indies, and was at the centre of Indonesia's campaign for independence. The island dominates Indonesian social, political and economic life.</p> 
      <p>Groovy is an object-oriented programming language for the Java platform. It is a dynamic language with features similar to those of Python, Ruby, Perl, and Smalltalk. It can be used as a scripting language for the Java Platform. 
       Groovy uses a Java-like bracket syntax. It is dynamically compiled to Java Virtual Machine (JVM) bytecode and interoperates with other Java code and libraries. Most Java code is also syntactically valid Groovy.</p> 
      <p>Scala runs on the Java platform (Java Virtual Machine) and is compatible with existing Java programs. It also runs on Android smartphones. An alternative implementation exists for the .NET platform, but it has not been kept up to date. 
       Scala has the same compilation model as Java and C# (separate compilation, dynamic class loading), so Scala code can call Java libraries (or .NET libraries in the .NET implementation).Scala's operational characteristics are the same as Java's. The Scala compiler generates byte code that is nearly identical to that generated by the Java compiler. In fact, Scala code can be decompiled to readable Java code, with the exception of certain constructor operations. To the JVM, Scala code and Java code are indistinguishable.</p> 
      </div> 
    </body> 
</html>

來源

2011-03-26 07:59:40 Krishna

您能否將此作爲新問題發佈，而不是回答上述問題。這確實是一個單獨的問題。另外，我不確定在問題上是否存在_comment限制，但我的答案中的評論部分變得很長，並且有任何人打擾閱讀的時間過長的危險。 – andyb 2011-03-31 06:52:48

增加字體大小與JavaScript的周圍固定在CSS列

回答

相關問題