HTML / CSS:向左浮动无法正常工作,div 显示在前一个 div 的下方
我正在尝试使用 class="left" 和 class="right" 制作 2 列布局,目前我的 .right 列不会向左浮动,而是显示在我的 .left 列下方。
当我删除 .left 和 .right 内的所有内容时,浮动正常工作,有人可以帮助我找出我做错了什么吗?谢谢
I'm trying to make a 2 column layout using class="left" and class="right", at the moment my .right column will not float left and is showing up below my .left column.
When I remove everything inside .left and .right the float works correctly, can someone help me figure out what I'm doing wrong? Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您的
right
div 位于您的left
div 内。您有一条注释显示但它实际上并不是左 div 的末尾。在支持块突出显示的编辑器中查看它。
Your
right
div is inside yourleft
div. You have a comment that says</div><!-- left -->
but it isn't actually the end of the left div. Look at it in an editor that support highlighting of blocks.您的
.left
代码中似乎有一个未闭合的div
。在该块的末尾添加另一个结束
div
标签似乎可以修复它。http://jsfiddle.net/SG8sE/4/
You appear to have an unclosed
div
in your.left
code.Adding another end
div
tag to the end of that block seems to fix it.http://jsfiddle.net/SG8sE/4/
如果您在 .left 和 .right div 上定义了内边距和/或边距,请确保它们(带有内容)都有空间并排显示。
我发现在处理初始布局时在元素周围放置 1px 边框很有帮助,可以真正掌握所有内容的位置。
If you have padding and/or margins defined on the .left and .right divs, make sure there is room for each of them (with content) to appear side by side.
I find it helpful to put a 1px border around elements while working on an initial layout to really get a handle on where everything is.