当前位置：文江博客话题详情

CSS 问题，100% 宽度不断移出位置

发布于 2024-11-30 09:41:36 字数 347 浏览 0 评论 0原文

我目前正在这个网站上工作， http://no-illusions.nl 一切都很顺利，但我发现了一件我无法解决的非常愚蠢的事情。

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

所以我将宽度设置为 100%，但现在该部分只是浮在我想要的位置下方！

它应该是这样的！[它应该是什么样子][1]

但这就是它的样子，

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满意归宿 2024-12-07 09:41:36

请记住，相对大小是相对于包含元素的。如果您说 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} 类型的东西。

Remember that relative sizes are relative to the containing element. If you say width: 50%, you'll get an element that's 1/2 the width of its container. So your saying width: 100% makes the text div take 100% of the container's width, and it becomes 500px as well.

You can put the image inside the text div and float it. With appropriate margins/padding, the text will wrap around the image, and you'd get something like:

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

text text text text text
text text text text text

The basic html structure woul be:

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

otherwise you'd need to go with fixed with divs, and dynamically change the text div's width based on whether there's an image present or not. if (has image) { width: 350} else { width: 500} type of thing.

回复收藏 0 原文