Javascript 图像跨多个列

Javascript 图像跨多个列,javascript,html,css,Javascript,Html,Css,我在一个html页面上工作了很长一段时间,首先我要创建一个html页面,其中的文本在列中对齐,并且文本中有一个图像。我使用CSS3 column layout属性使文本在列中对齐。现在我需要将图像放在多个列上。因此,我将图像粘贴到文本div上,使其跨越两列,但第三列也从图像的底部位置开始。由于图像只显示到第二列,我们将在第三列上获得一个空格。我们有没有办法去掉第三列上面的空白,应该从上面开始。下面我将粘贴我的示例html页面 <html> <head> <

我在一个html页面上工作了很长一段时间,首先我要创建一个html页面,其中的文本在列中对齐,并且文本中有一个图像。我使用CSS3 column layout属性使文本在列中对齐。现在我需要将图像放在多个列上。因此,我将图像粘贴到文本div上,使其跨越两列,但第三列也从图像的底部位置开始。由于图像只显示到第二列,我们将在第三列上获得一个空格。我们有没有办法去掉第三列上面的空白,应该从上面开始。下面我将粘贴我的示例html页面

<html>
  <head>
    <title>Test</title>
<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><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>

试验
div#列{
左边距:20px;
-moz列宽:250px;
-moz柱间距:20px;
-webkit列宽:250px;
-webkit柱间隙:20px;
高度:850px;
}
p{
保证金:0;
清除:左;
字体大小:16px;
文本对齐:对齐;
}
img{
浮动:左;
边缘顶部:2倍;
右边距:10px;
位置:固定;
}
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时一位不知名的印刷商拿起一个打印工具,将其拼凑成一本打印样本书。它不仅存活了五个世纪,而且还跨越到电子排版,基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行,最近随着Aldus PageMaker等桌面出版软件的发布,包括Lorem Ipsum版本

名称从LiveScript更改为JavaScript大致与Netscape在其Netscape Navigator web浏览器中增加对Java技术的支持一致。最终的名称选择引起了混乱,给人的印象是该语言是Java编程语言的衍生产品,而这一选择被许多人认为是Netscape的一种营销策略,旨在为JavaScript提供当时炙手可热的新web编程语言的纪念。有人还声称,该语言的名称是网景公司与Sun公司达成的一项联合营销协议的结果,作为交换,网景公司将Sun公司的Java运行时与当时占主导地位的浏览器捆绑在一起。维瓦摩斯·斯克利斯·伊普苏姆·尤斯托(Vivamus scelerisque ipsum ut justo)。佩伦茨克和舌苔-马萨矢状红。在乌尔纳尼布,伊莱芬德维尔,苏西比特,矢状位,努克

Nam ut sapien是一家名为Ped pulvinar rutrum的公司。Nunc欧盟精英塞德·奥古斯·阿利奎特·廷西登(augue aliquet tincidunt)。莫比罗特伦。nisl eu tortor bibendum eleifend的Fusce。塞德·埃克梅特斯。Phasellus nec elit。莫比·托托·努拉,特里斯蒂克·a,阿迪皮斯,康塞特图尔等,尼西。我们的智囊团就是这样的。维瓦摩斯·图皮斯·阿库、普莱斯特拉特·尤尔、康格·维尔、康茂德·尤特、尼塞尔

JavaEE包括几个API规范,如JDBC、RMI、电子邮件、JMS、web服务、XML等,并定义了如何协调它们。JavaEE还具有JavaEE特有的一些组件规范。其中包括企业JavaBean、连接器、servlet、Portlet(遵循JavaPortlet规范)、JavaServer页面和几种web服务技术。这使开发人员能够创建可移植和可扩展的企业应用程序,并与遗留技术集成。JavaEE应用服务器可以处理事务、安全性、可伸缩性、并发性和部署到它的组件的管理,以便开发人员能够更多地关注组件的业务逻辑,而不是基础设施和集成任务

爪哇(印度尼西亚语:爪哇)是印度尼西亚的一个岛屿。它拥有1.36亿人口,是世界上人口最多的岛屿,也是世界上人口最密集的地区之一。它是印度尼西亚60%人口的家园。印度尼西亚首都雅加达位于西爪哇。印尼历史的大部分发生在爪哇岛;它是强大的印度教佛教帝国、伊斯兰苏丹国的中心,是荷兰东印度群岛殖民地的核心,也是印度尼西亚独立运动的中心。该岛主宰着印尼的社会、政治和经济生活

Groovy是用于Java平台的面向对象编程语言。它是一种动态语言,具有与Python、Ruby、Perl和Smalltalk类似的特性。它可以用作Java平台的脚本语言。 Groovy使用类似Java的括号语法。它被动态编译为Java虚拟机(JVM)字节码,并与其他Java代码和库进行互操作。大多数Java代码在语法上也是有效的Groovy

Scala运行在Java平台(Java虚拟机)上,与现有Java程序兼容。它也可以在安卓智能手机上运行。NET平台有一个替代实现,但尚未保持最新。 Scala的编译模型与Java和C#(单独编译、动态类加载)相同,因此Scala代码可以调用Java库(或.NET实现中的.NET库)。Scala的操作特性与Java相同。Scala编译器生成的字节码与Java编译器生成的字节码几乎相同。事实上,Scala代码可以反编译为可读的Java代码,但某些构造函数操作除外。对于JVM来说,Scala代码和Java代码是无法区分的


可能重复@RotoRa,是的,我也用这个更新了示例html页面。但现在我想我可以编辑CSS3多列布局和图像跨度了