CSS问题，100％宽度不断移动到位

Question

我目前正在这个网站上工作， http://no-illusions.nl 它没事，但我找到了一个我无法解决的非常愚蠢的事情。

我有一个宽度为500px的div（包装器），里面我有不同的div包含图像和文本。现在的问题是文本的宽度是动态的，在某些部分它可能是200px宽度，在某些页面上它可能是350px。

所以我将宽度设置为100％，但现在该部件只是漂浮在我想要的地方！

它应该是这样的， ！[应该怎么看] [1]

但这就是它的样子，

我希望你们能给我一个正确的方向。

Answer 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}类型的东西。

Answer 2

之前我一直困扰着我，我通常会通过设置段落的最大宽度来解决它。这应该导致文本在该宽度内包装。

Answer 3

.update_respond p{width: 273px;}

Answer 4

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

Answer 5

<p> - 标签根本不需要任何宽度，因为它们是块元素，它们被拉伸到可用的最大宽度。