2011-08-18 49 views
0

我目前在研究这个网站, http://no-illusions.nl 这很好,但我发现了一个非常愚蠢的东西,我无法解决。CSS的问题,100%的宽度不断移动的位置

我有一个宽度为500px的div(包装),里面有不同的div,包含图像和文本。现在问题在于文本的宽度是动态的,有些部分可能是200px宽度,有些页面可能是350px。

所以我把宽度放在100%,但是现在这个部分只是漂浮在我想要的地方!

这是它应该如何看, ![它应该如何看] [1]

但是,这是它的外观,

我希望你们能给我在正确的方向上推。

回答

1

请记住,相对大小是相对于包含元素。如果你说width: 50%,你会得到一个元素是其容器宽度的1/2。所以你的话说width: 100%使文本div占据容器宽度的100%,并且它也变成500px。

你可以把图像放在文本div里面并浮动它。通过适当的利润率/填充,文本将换行的图像四周,你会得到这样的:

imgimgimg text text text 
imgimgimg text text text 
imgimgimg text text text 

text text text text text 
text text text text text 

基本的HTML结构是竟被:

<div style="width: 500px;"> 
    <div style="float: left; margin: 5px;"><img src="..."></div> 
    text text text text text 
</div> 

否则你需要去用div固定,并根据是否存在图像动态更改文本div的宽度。 if (has image) { width: 350} else { width: 500}类型的东西。

+0

看来最后的选择是最好的解决方案。 Pfff。 –

+0

谢谢,我重新访问了该网站的部分内容,并想出一种解决方法。显然,我对浮球有点太失望:留在一些元素上。删除它们,它在那里漂浮:)。 –

0

这让我感到困扰,我通常通过设置段落的最大宽度来解决这个问题。这应该会导致文本在该宽度内包装。

+0

那么这种破坏动态内容的理想,因为与元素的变量是可变的。 –

+0

是的,但我的意思是最大宽度。如果它达到那个宽度,则包装内容。如果没有,就让它成为。虽然从你的其他答案看来,这并没有太大的帮助。抱歉。 –

+0

我找到了解决方案!或者问题,无论你想要什么。问题是一些元素有一个浮动:左边,移除和玩,突然它弹出在那里! –

0
.update_respond p{width: 273px;} 
+0

是的(我尝试过),但也影响下面的div的文本元素,导致它小。 –

+0

然后尝试使用

- http://www.htmlcodetutorial。com/tables/- 每个尺寸和定位的可能性的宽度 – 2011-08-19 10:25:01

0

您可以在.update_respond类上设置330px的最大宽度。

+0

是的(我尝试过)但是这也影响下面的div的文本元素,导致它变小。 –

0

您根本不需要任何宽度的<p> -tags,因为它们是块元素,它们被加固到可用的最大宽度。

+0

他们的parant元素的最大宽度是更好的描述它的方法吗? –

+0

不是在任何情况下,因为可能有浮子,其宽度从父母宽度中减去。 – feeela