Question

我想将一个CSS样式与div的position属性一起修复。这个特殊的div放在另一个带有一些文本的div中。但CSS位置proverty修复的div超出了文本的顶部。所以文本被隐藏在那个div下面。我需要将文本div和image div相互对齐。因此，文本会绕过该图像，并且图像下不会隐藏任何内容。

<html>
<head>
<style type="text/css">
    .newspaper
    {
      -moz-column-count:3; /* Firefox */
      -webkit-column-count:3; /* Safari and Chrome */
      column-count:3;
      -webkit-column-width:100px;
      column-width:100px;
    }
  </style>
  </head>
<body>

  <p><b>Note:</b> Internet Explorer and Opera do not support the column-count property.</p>
  <div class="newspaper" >
    <div class="changeFont" style='font-size:18px;'>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
    </div>

  <div style="float: right; position:fixed; left:170px;top:80px;display:inline-table;">
    <img id="imageTable" width="280" height="80" src="http://www.google.co.in/logos/2011/alamara11-hp.jpg"/>
  </div>

    <div class="changeFont" style='font-size:18px;'>
      ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
      eu feugiat nulla facilisis at 9999999999999999
      111111111111111 vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
      duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
      mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
      Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
    </div>


</body>
</html>

Answer 1

你可以做的事情 - 与第二个div一起玩CSS位置。并使用z-index：1;或z-index：-1;

检查css的z-index属性。 z-index将帮助您将一个对象保持在另一个对象之上。所以如果第一个div是z-index：1;第二个是z-index：2;第二个将漂浮在第一个。它需要绝对定位。如需更多信息，请查看手册。

如果您有任何其他问题 - 请问我;）

Answer 2

在图像周围包装文本的唯一方法是浮动图像。但是这样，图像可能只在文本的左侧或右侧，而不是在您定义的位置。

看这里http://jsfiddle.net/e5LQS/

您可以创建多列文本，将所需的图像放在其中一列中，以便文本将其环绕。但是你不能在两个列或行的中间放置一个图像，文本环绕它，因为这意味着图像的位置是绝对的，文本不会考虑它而只是忽略图像。

CSS位置已修复

2 个答案: