2011-03-14 226 views
4

我想拥有一个固定的div位置属性的CSS样式。这个特殊的div被放在另一个div中,并带有一些文本。但是,固定CSS位置proverty的div覆盖了文本的顶部。所以文本被隐藏在那个div下面。我需要将文本div和图像div彼此对齐。因此,文字绕过该图像,并且图像下无法隐藏任何内容。CSS位置固定

<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> 
+2

请张贴一些代码 – amosrivera

+1

您想让文字在用户滚动时重新打包吗?不会发生。 – Marcel

+4

你误解了'position:fixed'的意思。这意味着无论滚动位置如何,div的位置都固定在视口中。所以它会以某种方式总是重叠某种东西。 'position:fixed'也会从流程的父级中移除div,父级将不再考虑固定div并在其周围移动内容。也许你是在用'float'代替之后? – Bazzz

回答

0

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

检查css的z-index属性。 z-index将帮助你保持一个对象在另一个之上。所以如果1st div是z-index:1;第二个是z-index:2;第二个将漂浮在第一个。它需要绝对定位。为更多detals检查手册。

,如果您有任何其他问题 - 问我;)

0

你可以做环绕的图像文本的唯一事情是浮动的图像。但是这样图像可能只能在文本的左边或右边,而不是在你定义的位置。

看吧http://jsfiddle.net/e5LQS/

可以使文本的很多列,把你列一个想要的图像,从而使文本将周围包裹。但是,在文本环绕它的两列或两行中间不能有图像,因为这意味着图像具有绝对位置,并且文本不会考虑它,并且简单地忽略图像。