CSS/Float - 浮动元素不使用分配的宽度
我正在尝试使用 CSS 创建网站布局。我有四 (4) 个 DIV 元素。第一个是我在页面中居中的主容器，包含所有其他 DIV 元素。其余三个 DIV 中，一个是页面标题，一个是左侧菜单，最后一个包含页面内容。我想让内容 DIV 浮动，使其与菜单 DIV 相邻。但是，我发现 CONTENT DIV 的宽度没有使用我指定的宽度。我创建了一个在 JSFIDDLE 上运行的示例，这应该使它更容易可视化。
我想弄清楚的是为什么 CONTENT DIV 不'不是按照我定义的那样占用 600 像素吗？谢谢。
I am trying to create a site layout using CSS. I have four (4) DIV elements. One is the main container that I have centered in the page and contains all the other DIV elements. Of the remaining three DIVs one is a page header, one is a left menu and the last holds content for the page. I would like to have the CONTENT DIV floated such that it is adjacent to the MENU DIV. However, I am finding that the width of the CONTENT DIV is not using the width I specified. I have created a sample running on JSFIDDLE which should make it easier to visualize.
What I am trying to figure out is why the CONTENT DIV doesn't take up 600 pixels as I have defined? Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您还必须浮动您的内容。您的内容 div 距离左侧 600（不包括浮动），如果您添加更多文本，它将在菜单下运行：示例< /a>.
如果你浮动它，那么它会你想要的，但你必须小心尺寸，否则它会浮动到您的菜单下方。
如果你只给它 200px 的边距并且没有宽度，我认为效果最好，因为它会使用剩余的空间并与左边缘保持 200 像素。浮动不会进一步推动它，边距来自容器 div。
You have to float your content also. Your content div is 600 from the left not counting the float and if you add more text it will run down under the menu: example.
If you float it, then it will do what you want, but you have to be careful about sizes or it will float down under your menu.
If you just give it a 200px margin and no width, I think that would work best as it would use the remaining space and stay 200px from the left edge. The float doesn't push it further, the margin is from the container div.