css - CSS Float 边框重叠问题

Question

我试图将一个菜单浮动到页面的左侧，当它变得足够大以到达下面的内容时，Firefox 会完全按照它应该的方式将内容撞到......除了边框。

这是一个包含一些项目的屏幕截图：

另一个有几个项目

“方框 4”按预期移动，但其边界仍位于左侧。哦

HTML：

    <?xml 版本="1.0" 编码="UTF-8"?>
    <!DOCTYPE html 公开
        “-//W3C//DTD XHTML 1.0 严格//EN”
        " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <头部>
            <标题></标题>
            <link rel="stylesheet" href="css/main.css" />
        </head>
        <正文>
            <div id="菜单">
                <ul>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                    <li>项目</li>
                </ul>
            </div>
            <div id="title">
                <img src="img/logo.png" alt="logo" />
                <span id="title_text">标题</span>
            </div>
            <div id="容器">
                <div id="box1" class="topbox">
                    <div class="title">方框1标题</div>
                    <div class="content">内容放在这里</div>
                </div>
                <div id="box2" class="topbox">
                    <div class="title">方框2标题</div>
                    <div class="content">内容放在这里</div>
                </div>
                <div id="box3" class="topbox">
                    <div class="title">方框3标题</div>
                    <div class="content">内容放在这里</div>
                </div>
            </div>
            <div id="box4">
                <div class="title">方框4标题</div>
                <div class="content">内容放在这里<br />换行</div>
            </div>
        </正文>
    </html>

CSS：

#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;
}

score 2 · Accepted Answer

我认为您无法仅使用 css 来做到这一点，因为您正在与正常流程作斗争。元素通常是堆叠在一起的，当你向下浏览页面时，试图让一个元素让开并不是这样的工作方式。

score 2 · Accepted Answer

box4 的 css 中应该有一个clear:both;属性。它应该可以解决问题。我刚刚对其进行了测试，它可以满足您的要求。

#box4 {
    border: 1px #000 solid;
    width: 100%;
    clear:both;
}

score 0 · Accepted Answer

您可以通过像这样更新 #box4 规则来解决此问题：

#box4 {
   border: 1px #000 solid;
   margin-left: 100px;
}

在长的sidenav css下面编辑#box4：

#box4 {
   border: 1px #000 solid;
   clear: both;
}

score 0 · Accepted Answer

您可以将 #box4 浮动到左侧..

然而，它不会有 100% 的宽度..

正如你所理解的，这是无法修复的，因为 100% 的宽度总是会搞砸一些东西。你不能让它处于 100% 的宽度，但在推动时不会占用 100% 的......

score 0 · Accepted Answer

在“box4” div 上方包含以下行。

<div style="clear:both;"></div>

这样您的代码应如下所示：

<div style="clear:both;"></div><!-- including this line clear floats --> 
<div id="box4">
 <div class="title">Box 4 Title</div>
 <div class="content">Content goes here<br />line break</div>
</div>

干杯！！！

score 0 · Accepted Answer

你错过了container外面的box4。你可以检查下面的片段。

#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: block;
    border-right: none;
    border-bottom: 1px #000 solid;
    padding-left: 0px;
    padding-right: 0px;
    text-align:center;
    
}

#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 id="box4">
                <div class="title">Box 4 Title</div>
                <div class="content">Content goes here<br />line break</div>
            </div>
            </div>
            
        </body>
    </html>

css - CSS Float 边框重叠问题

6 回答 6

Related

Reference