CSS 浮动边框重叠问题
我试图将一个菜单浮动到页面左侧，当它变得足够大以到达下面的内容时，Firefox 会按照应有的方式将内容颠倒...除了边框。
这是包含一些项目的屏幕截图：
另一个包含几个项目items
“Box 4”按预期移动，但其边界保持在左侧。哦
#menu {
float: left;
width: 100px;
padding-left: 0px;
}
#menu ul {
margin: 0px;
padding: 10px;
}
#title {
margin-left: 100px;
border: 1px #F00 dashed;
height: 40px;
font-size: 20pt;
}
#title_text {
display: inline-block;
vertical-align: top;
margin-top: 5px;
}
#container {
margin-left: 100px;
}
.topbox {
width: 30%;
height: 200px;
display: inline-block;
margin-top: 5px;
margin-bottom: 10px;
margin-right: 2px;
margin: none;
border: 1px #F00 solid;
}
.topbox .title {
text-align: center;
border-bottom: 1px #000 solid;
padding-top: 1px;
}
.content {
padding: 2px;
}
#box4 {
border: 1px #000 solid;
width: 100%;
}
#box4 .title {
display: inline;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
padding-left: 2px;
padding-right: 2px;
}
#box4 .content {
display: inline;
} <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="menu">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div id="title">
<img src="img/logo.png" alt="logo" />
<span id="title_text">Title</span>
</div>
<div id="container">
<div id="box1" class="topbox">
<div class="title">Box 1 Title</div>
<div class="content">Content goes here</div>
</div>
<div id="box2" class="topbox">
<div class="title">Box 2 Title</div>
<div class="content">Content goes here</div>
</div>
<div id="box3" class="topbox">
<div class="title">Box 3 Title</div>
<div class="content">Content goes here</div>
</div>
</div>
<div id="box4">
<div class="title">Box 4 Title</div>
<div class="content">Content goes here<br />line break</div>
</div>
</body>
</html>I'm trying to float a menu to the left of the page, and when it gets large enough to reach the content below, Firefox bumps the content over exactly as it should... except for the border.
Here is a screenshot with a few items:
And another with several items
"Box 4" gets moved over as expected, but its border stays at the left. O.o
#menu {
float: left;
width: 100px;
padding-left: 0px;
}
#menu ul {
margin: 0px;
padding: 10px;
}
#title {
margin-left: 100px;
border: 1px #F00 dashed;
height: 40px;
font-size: 20pt;
}
#title_text {
display: inline-block;
vertical-align: top;
margin-top: 5px;
}
#container {
margin-left: 100px;
}
.topbox {
width: 30%;
height: 200px;
display: inline-block;
margin-top: 5px;
margin-bottom: 10px;
margin-right: 2px;
margin: none;
border: 1px #F00 solid;
}
.topbox .title {
text-align: center;
border-bottom: 1px #000 solid;
padding-top: 1px;
}
.content {
padding: 2px;
}
#box4 {
border: 1px #000 solid;
width: 100%;
}
#box4 .title {
display: inline;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
padding-left: 2px;
padding-right: 2px;
}
#box4 .content {
display: inline;
} <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="menu">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div id="title">
<img src="img/logo.png" alt="logo" />
<span id="title_text">Title</span>
</div>
<div id="container">
<div id="box1" class="topbox">
<div class="title">Box 1 Title</div>
<div class="content">Content goes here</div>
</div>
<div id="box2" class="topbox">
<div class="title">Box 2 Title</div>
<div class="content">Content goes here</div>
</div>
<div id="box3" class="topbox">
<div class="title">Box 3 Title</div>
<div class="content">Content goes here</div>
</div>
</div>
<div id="box4">
<div class="title">Box 4 Title</div>
<div class="content">Content goes here<br />line break</div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我认为你无法单独使用 css 来做到这一点，因为你正在与正常流程作斗争。元素通常堆叠在一起，当您向下浏览页面时试图要求其中一个元素移开，这并不是它的工作原理。
I think you'll not be able to do this with css alone because you're fighting the normal flow. Elements normally are stacked on top of each other and trying to ask one to move out of the way as you go down the page is not how this works.
box4 的 css 中应该有一个
clear:both;属性。它应该可以解决问题。我刚刚测试了它，它满足了你的要求。box4 should have a
clear:both;property in its css. It should do the trick. I just tested it and it does what you want.您可以通过更新 #box4 规则来解决此问题，如下所示：
在长 sidenav css 下方编辑 #box4：
You can fix that by updating your #box4 rule like so:
Edit #box4 below a long sidenav css:
在“box4”div 上方添加以下行。
这样你的代码应该如下所示：
干杯！！！
Include the below line above "box4" div.
So that your code should look like below :
Cheers !!!
你可以将 #box4 向左浮动。
但是它不会有 100% 宽度。
正如你所知，这是无法修复的，因为 100% 宽度总是会弄乱一些东西。你不能将它设置为 100% 宽度但推动时不会占用 100%...
You could float the #box4 to the left..
It would not however have the 100% width ..
As you udnerstand this is not fixable, since the 100% width will always mess something up.. you cannot have it at 100% width but not take up 100% when pushed...
您错过了容器之外的box4。你可以检查下面的代码片段。
you have missed the box4 outside of container. you can check below snippet.